Responsive Order Summary View

Community feedback

• 

  Yonten•340

  @yozidstPosted 11 months ago

  Hi there 👋

  Great Job on the Challenge!

  In terms of responsiveness, you can use the clamp function on the width of the container to perform scalable layouts.

  eg.

  @media only screen and (max-width: 1440px) and (min-width: 375px) {
      ...
      .orderSummary-card {
           width: clamp(350px, 30vw, 32.7rem );  // you can play around with the values. 
           ...
        }
       ...
  }
  

  • the first value is the smallest case scenario.
  • the middle value that occurs the most often and resizes depending on the screen width
  • the last value is the max-width you are comfortable with for scaling.

  Also, for your orderSummary-card, you listed two ways to center the container inside the main. Try to stick to one.

  Hope it was helpful! Keep going!

  Marked as helpful

  1
• 

  Kimo Spark•2,190

  @kimodev1990Posted 11 months ago

  • It's better in the future to avoid giving your design sizes definite values , It's better to give percentage values to make your design responsive with viewport dimensions. For example, you could assign class .orderSummary-card width: 30%; as you like it to be, So the width of your card will be 30% 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 will be suitable for any device layout. ( Responsive Design )

  Hope you find this Useful & Helpful.

  Other than that, Nice work & keep Going on.

  Marked as helpful

  1