Skip to content
Submitted almost 3 years ago

Order Summary Page Mobile First

Matthew Van Pelt•575
@Mattvp21
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

Starting to learn how to build things mobile first and what was uncomfortable at the beginning is becoming more and more my preferred way to do it. I'm happy to hear more opinions about mobile-first vs desktop first as I'm always open to learning.

Community feedback

  • darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Matthew this is an awesome article discussing the mobile-first approach.

    I really like your solution, I think you have nailed it - with a few tweaks it could be perfect:

    • there is a typo in your box-sizing declaration: box-sizing: border-boxxw;
    • i would update the background-image declaration to: background-size: 100% auto; and remove background-position: 0 -15rem; also remove the image at mobile view to closer match the design
    • you could look at using the :hover pseudo-class to help you match the hover/active states in the design. Here is some information and some button hover styling
    • your design could do with some white space. If you add some padding to the card and div's inside the card it would really help it breathe. Something to look out for is the gap property for flexbox, it's experimental now but will make life a lot easier when it get's more support
    • you could centre your design nicely in the viewport if you remove the padding to your <body>. I think you missed display: flex; so add that with your align-items and justify-content declaration along with min-height: 100vh; flex-direction: column;

    All the best with it all,

    Any questions give me a shout!

    Marked as helpful
    1
    Matthew Van Pelt•575
    @Mattvp21Posted almost 3 years ago

    @darryncodes Thanks for the feedback and for helping me deal with that background image! I fixed the issues.

    Thanks,

    Matt

    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