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

Responsive Order Summary Component using Flexbox

Megan May 170

@mooogz

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


Trying to get better at organizing and writing clean CSS and HTML. Are my media queries okay? I can't ever seem to get the height to look right in mobile view. I also feel like I use a lot of padding and margins when there might be an easier way to organize elements. I haven't learned Grid yet so maybe that will help?

Community feedback

v 110

@ughvop

Posted

I think what would make your CSS cleaner is using mobile-first design, which is writing code for mobile screen size first and then use media queries to add the touches to the bigger screen size (which is you won't need much)

The second issue I see here isn't the lack of grind, because you don't need grid here if you use flex pretty well. so I recommend to you watching this video by Kevin Powell (https://youtu.be/u044iM9xsWU)

and not only this video, his whole channel would be really helpful 'cause he always prefer to not use much flex property, margin or padding unless you really really need it

Good luck with the rest of the challenges!

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