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

Order summary responsive with media queries and calc() for width

VincenzoMuoloβ€’ 180

@VincenzoMuolo

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


Hi! as i say in the title, i tried to use both media queries and calc() property to cover a better range of resolutions, but i'm not totally fine with the result i got, any suggestion in that context is appreciated! Or also if there are some best practices that i'm not considering right now.

Community feedback

Adrianoβ€’ 34,090

@AdrianoEscarabote

Posted

Hi VincenzoMuolo, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

If we see how the layout is behaving at higher resolutions, with the help of google dev tools, we will see that it is stretching a lot, to solve this we can use a max-width with the value we want the content to stop growing and to center use a margin: 0 auto;

example:

@media screen and (min-width: 1440px)
main {
    max-width: 500px;
}

The rest is great!

I hope it helps... πŸ‘

Marked as helpful

0

VincenzoMuoloβ€’ 180

@VincenzoMuolo

Posted

@AdrianoEscarabote Hi! thanks for your feedback! I will definitely adjust that!

1

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