Skip to content
Submitted about 3 years ago

Order Summary using Flexbox

Marit•400
@Maritxx
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi!

I finished the order summary challenge. The main question I had this time was regarding the best practice of (consistent) spacing between elements. Where do you apply padding or margins? Should I create a new class or apply it directly to the elements? And in doing so, do I just give each a padding-top or should I use the shorthand padding property?

Any general feedback is also appreciated!

Code

Please log in to post a comment

Log in

Community feedback

  • Daniel•170
    @Catalyst497

    Hi Marit,

    I just looked at your project solution and I must say, your solution looks very detailed. I also like the fact that you removed all the default stylings to every possible HTML element with the reset CSS. Yeah, those default stylings could be really troublesome sometimes :(

    Just to add, I think your body tag could use a little bit of margin to it. The way the content touches the top of the page might not look really good to the users. You could try adding a little bit of body{ margin: 1rem }

    I think you should add a common a class to elements if you want to give them a common style or better still I use this(I know it's a lazy developer thing): parent > * {property: style}. Now this is only a good fit if you want the direct children of an element to have a common style to them. It just works for me, you know.

    I hope you find this feedback helpful. Happy Coding.

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