Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Component Using Flex

Fizzify 20

@Fizzify

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am mostly just a beginner at CSS3 and I am trying to improve, could anyone tell me how you could make my code more similar to the design?

Community feedback

Nic 595

@nicm42

Posted

This looks great for a beginner.

I noticed in your html you have this:

<h2>Order Summary</h1> I think you meant that to either be an h2 or a an h1.

The Annual plan bit is a bit of a pain in the design. It's a good case for using Grid, because you can have the note and the Change link spanning two rows. If you don't know Grid, then I found Wes Bos's free course really helpful. If you want to stick to Flex, then you can make it as a row, then put the Annual Plan and price into a div and make that fix a Flex of direction column.

To stop your card getting bigger when you do that, you can put a max-width on it. That'll make sure the card will never get any wider than that.

The easiest way to get the Proceed to payment looking more like the design is to make it a button. That will automatically only make it as wide as the text. Then you can add padding to get it to the size you need. Then you can add the border-radius and box shadow.

And then I think that pretty much gets you there. What you have is really close - and it looks alright. If I wasn't comparing it to the design I'd think it was fine.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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