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 component using mobile-first approach

ivara21 120

@ivara21

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 Everyone good day , i just finished this challenge using mobile first approach for the first time ,so please understand that my code using mobile approach at the moement is sucks, please comment to improve my mobile approach skills. And also in the 1440px screen size i cant stretch the background image. All comments will be much appreciated, Thank you.

Community feedback

Kimo Spark 2,190

@kimodev1990

Posted

  • It's better in the future to avoid giving your design sizes definite values such as your div with class .container width: 365px & height: 520px, It's better to give percentage values to make your design responsive with viewport dimensions. For example, you could assign class .container width: 50%; as you like it to be, So the width of your card will be 50% in relative to body width. This helps your design to be flexible growing and shrinking.
  • Adding up to the previous point, If you need to assign definite values, you could check on and use clamp ( ) method ( font-size, width, margins, paddings, etc. ) , so your design sizes will change according to the viewport dimensions and having a responsive design suitable for any device layout.

Hope you find this Useful & Helpful.

Other than that, Nice work & keep Going on.

0

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