Responsive order summary component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi there! 👋

  Congratulations on completing another challenge! 🎉 It's good to see you finishing another challenge. 😄

  Regarding your questions,

  • I did the same thing as you did. I put the img outside the container of the elements. Also, I couldn't think of a better approach so I believe this is already a good solution though. 🙂
  • I think it's better to use p instead of ul since it is not a list.
  • As far as the CSS, I would recommend getting yourself familiar with rem units. In general, rem is better than px because it adapts the user's font size setting (browser or even system setting).

  One suggestion, all the images on this page are decorative images. So, I would recommend leaving the alt="" empty. I can that because if I remove all the images, then there won't be any missing information, it's just make the site looks less beautiful.

  I hope this helps. 😊

  Marked as helpful

  2

  ---

  

  P

  KurtJF•150

  @KurtJFPosted over 2 years ago

  @vanzasetia thank you again for answering my questions! 😊

  Regarding the rem unit. does it change when I set the font size to a different value?

  • If default the default value is 16px = 1rem

  • If I change the font size to 20px does it change to 20px= 1rem?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @KurtJF

  The default value of the 1rem depends on the user's font size setting. In general, developers like to think that the users won't change the default browser's setting. So, we can assume that most users would have 16px font size in their browser settings. That's why 1rem is equal to 16px.

  But, if you set the font-size of the html element then it will overwrite the user's font size setting.

  For example:

  html {
    font-size: 10px;
  }
  
  body {
    font-size: 1rem;
    /* Now, 1rem = 10px regardless of the user's font size setting */
  }
  

  However, it's best to never change the html font size since it can cause huge accessibility implications for those users with different font sizes or zoom requirements. Also, when you are working with a CSS framework, you will change every size that the framework has defined.

  Marked as helpful

  0

  

  P

  KurtJF•150

  @KurtJFPosted over 2 years ago

  @vanzasetia thanks for the explanation! Btw your explanations are easy to understand.👍

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @KurtJF

  Thank you for saying that! I am happy that you can easily understand my explanations! 😄

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Kurt, congratulations for your solution!

  Look your solution component seems great, I liked also the way you've placed the background creating this custom wave effect.

  All you card miss is the the responsivity, due the fixed width you've set for the container, the card doesn't contract when the screen scales down, to fix that you need to replace width with max-width. See the fixes below:

  .card-container {
      max-width: 330px;
      margin: auto;
  }
  

  Hope it helps Kurt, and happy coding!

  Marked as helpful

  1

  ---

  

  P

  KurtJF•150

  @KurtJFPosted over 2 years ago

  @correlucas so does it mean its better to use max-width vs width to make it responsive?

  Is there a situation in which using width is better than max-width? thank you!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @KurtJF

  max-width will allow the element to shrink when it is needed while width won't allow the element either to grow or to shrink.

  I think in this case, it's best to use max-width to limit the width of the card while still allowing the card to shrink on tiny devices (e.g. 320px width).

  Marked as helpful

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @KurtJF will be better to use width when you want some elements has a fixed width, not less or not more than the width you've set, liked the profile photo in some solutions, that you don't it scales, because anyway are tiny images like 24px width/height.

  Here's a complete explanation about the difference and when use it

  https://blog.prototypr.io/what-even-is-the-difference-between-width-and-max-width-8f37b282c7f1#:~:text=This%20is%20a%20simple%20way,the%20browser%20use%20max%2Dwidth.

  Marked as helpful

  0

  

  P

  KurtJF•150

  @KurtJFPosted over 2 years ago

  @correlucas thanks for the reference! I'll keep it in mind, thank you!

  1