Responsive margin

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The header element is not needed for this challenge.

  • The “illustration” and Music Icon serves no other purpose than to be decorative; they add no value. Their alt tag should left blank and have an aria-hidden=“true” to hide it from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • The only heading in this challenge is the ”Order Summary". Every other text should wrapped in a paragraph element.

  • Your CSS Reset is being underutilized. To fully maximize it, you will want to add more to it.

  Here are some examples that you can freely use:

  Josh Comeau Reset

  Eric Meyer Reset

  • Implement a Mobile First approach 📱 > 🖥

  With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

  • For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using these unit gives users the ability to scale elements up and down, relative to a set value.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎄🎁

  Marked as helpful

  0

  ---

  

  Sté[PH]ane•160

  @Fanou59Posted almost 2 years ago

  @vcarames Hi バレンタイン,

  Thank you for your feedback :) I made some change based on your feedback.

  I need to dig the difference between [rem] and [em] because i don't understand why is better to use [em] for media-queries. i thought that [rem] have a link with the size defined at the [*] so for me i must use [rem] in my media queries.

  Thank you, Steph

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Fanou59

  Glad I could help!☃️

  rem is a CSS unit relative to the font size of an html.

  em will inherit font-size value from the parent element

  This article will explain in detail why em is the best option for media queries:

  https://zellwk.com/blog/media-query-units/

  Keep it up!

  Marked as helpful

  0

  

  Sté[PH]ane•160

  @Fanou59Posted almost 2 years ago

  @vcarames Thank you :)

  I'll use it for my next challenge :)

  1