Skip to content
Submitted about 3 years ago

HTML5, CSS Order Summary Component

Darya Makavchik•20
@daryamakavchik
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

Would appreciate any feedback :) Especially regarding media queries and ways to fit different screen sizes without losing the right structure.

Community feedback

  • Eray•1,410
    @ErayBarslanPosted about 3 years ago

    Your overall design looks great nice job there. Firstly since you're using flexbox you don't need position: relative & absolute and transform to place your box into center. You can display body as flex and go from there:

    html { height: 100%; }

    body { min-height: 100%; display: flex; justify-content: center; align-items: center; }

    You can apply the same to rest of your elements so you won't need to deal with numbers :)

    For media queries you got the right idea. But having width as percentage will lose you the structure as the resolution changes. That was my first approach to the challenge aswell then I was like why am I dealing with this :) You can have specified width and height for main box. Then you can give percentage to elements inside of it. This way you'll maintain the structure for most part as the screen size changes by just re-adjusting main-box size.

    Also you can get rid of accessibility issues by changing:

    • <html> to <html lang="en">
    • <div class="box"></div> to <main class="box></main>
    Marked as helpful
    0
    Darya Makavchik•20
    @daryamakavchikPosted about 3 years ago

    @Eradishub thank you so much! 🙏

    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