Skip to content
Submitted over 2 years ago

Order Summary

Carolina S.•80
@miporins
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

One more HTML and CSS challenge!

This one was very fun to build because of all organization with the CSS elements.

Hope you like it, and if you have any feedbacks about how I am coding in both HTML and CSS, I'll gladly hear it to improve! 😁

Code

Please log in to post a comment

Log in

Community feedback

  • Krzysztof Rozbicki•370
    @KrzysztofRozbicki

    Hey. I would have for you only one advice for responsive design because now yours is not responsive and looks cropped with viewport width lower than 500px.

    First of all consider if you need to use width property. If so instead of width: try to use max-width: more often which makes it more responsive.

    Secondly - when you will put a class to your photo and add it : width:100% it will automatically retain the width of its container even on smaller screens.

    And lastly but not leastly: With container like wrappers / mains etc consider using min() property e.g. width: min(87.5vw, 450px) - it will set your container width either to 450px or to 87.5% width of the screen - will choose the value that is lower.
    It is very useful when building the responsive designs. More here: https://developer.mozilla.org/en-US/docs/Web/CSS/min

    This is only one way to make it adaptive/responsive - you can reach the goal in different methdos. responsive designis quite a big topic not possible to put it all in this short comment. But i recommend you read more - testing it and simply have fun with the designs. The mobile-first must have right now. Overall you did a very good Job! And have fun!

    Marked as helpful

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