Skip to content
Submitted over 3 years ago

Order Summary Component done w/ Mobile-first design

Brandon Nguyenā€¢100
@rufflehuffle
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! This is my first time designing a website mobile-first. I would like to have some feedback on whether or not I make the website responsive correctly. Also, I'd like to know if there are any best practices I could implement when doing mobile-first design for my next project.

Thanks in advance :)

Community feedback

  • Emmilie Estabilloā€¢5,540
    @emestabilloPosted over 3 years ago

    Hi @rufflehuffle, congrats on your first submission! And going mobile-first :-) Few things I observed:

    • place media queries at the end of the file otherwise the styles will be overwritten by whatever you declare last (aka CSS cascade)

    • Line 12 on your CSS should be deleted. There's no need to declare a mq for styles that will load first. In relation, browsers use 16px as the default font size so there's no need for line 14 as well.

    • use relative units such as rem in place of px

    • Instead of using margins to control the width of .main-container, use max-width so it doesn't grow beyond the specified point

    • I think there's a background pattern that's missing on the body. The image has been deleted from your repo and therefore not showing.

    Hope this helps!

    Marked as helpful
    1

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