Skip to content
Submitted almost 2 years ago

Order summary component using mobile-first workflow

Christine•70
@christinepallon
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

My focus for this project was to take a mobile-first approach, since previously I had always done desktop-first and then handled the mobile view via media queries.

I noticed my design takes up way more of the page than the original. Would appreciate tips on how to get the size of the component on the page closer to the design. Thanks!

Community feedback

  • Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    Hey- your order is repeating because you have overwritten all your background properties in media queries with: background: url(pattern-background-desktop.svg),hsl(225, 100%, 94%);

    So all your previous properties were overwritten with default. You should put only specific: background-image: url(...) then you change only url of image and all other properties won`t be overwritten with defaults :) Hope it was helpful :)

    1
    Christine•70
    @christinepallonPosted almost 2 years ago

    @KrzysztofRozbicki Thanks so much! Media queries still trip me up, gotta get a better eye when it comes to catching when I've overwritten stuff.

    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