Skip to content
Submitted almost 3 years ago

Order Summary Component | HTML CSS Flexbox

Nick•40
@FrontEndNick2022
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi all, I was pretty pleased with how this one went with just two issues.

1 - Can someone please take a look at how I resolved the background image? I found it a real pain tbh and not sure I've put it together in the best way possible.

2 - This may be the stupidest question today but I can't for love nor money make the "Annual Plan" text bold without affecting the price at the same time. I gave it a custom class and set the font-weight to 700 etc, but that didn't work. I'm guessing it is something to do with inheritance perhaps? I tried all manor of declearing the parent classes in my CSS but still couldn't get it to change.

Any feedback is much appriciated.

Community feedback

  • Fraser Watt•1,790
    @fraserwatPosted almost 3 years ago

    Hey nick, this is looking good!

    On your 2nd point, you should be able to solve this by putting font-weight: 700 in your .text-dark rule, also means you can get rid of .font-weight-dark class on the <p> element.

    Background image looks fine, although I would use max-width instead of width on .card. Less of an issue on a single component challenge like this one, but when you've got loads of components on screen you want them to be as responsive to screen size changes as possible so don't want to be too prescriptive on widths and heights.

    Keep it up! Fraser

    Marked as helpful
    1
    Nick•40
    @FrontEndNick2022Posted almost 3 years ago

    Thank you very much for that @fraserwat, was killing me not seeing the issue. Of course it was such a simple fix lol

    Thank you for both tips and taking the time to look for me.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord