Order summary page using CSS

Community feedback

• 

  Davide•1,725

  @Da-vi-dePosted about 3 years ago

  Hi Elena, it's not a bad result for this challenge but it will be nice after making some changes in your code.

  • First thing, i'd recommend checking the report and try to resolve those issues. I try to guide you for better understanding:

  • The alt attribute must always be included in images (except decoratives images, the attribute can be left blank) tags.

  • The issues about landmarks is because your HTML is not semantic, that means it can't work properly with assistive technology. You should read about landmaks by clicking the link Learn more but i tell you what you miss in your code.

  • <main></main> element rght after the body tag, read about it here

  • The h2 heading needs to be a h1 instead! Heading elements should be in a sequentially-descending order, there always must be a h1 heading.

  • The attribution goes in <footer></footer> element.

  • The padding problem you referred is casued by a wrong approach, which is not mobile first. You used a media query that indicates a width smaller than 600px in which you applied just the padding but the rest of the code is for desktop, you need to resize your entire card for a small screen. This doesn't happen when the workflow is mobile first because you start working for the smaller device width, you can surf the web and you'll find tons of articles tutorial etc..

  • By the way, that little horizontal scroll bar is there because the card width is larger than the mobile width, the CSS property overflow controls the scrollbar behavior when it's set to hidden you don't see scrollbars anymore.

  Hope it helps a little, keep coding :-)

  Marked as helpful

  1

  ---

  

  Elena Martinez•80

  @nenamartinezPosted about 3 years ago

  @Da-vi-de Hello Davide, thank you for checking the code in such detail. You're right, I'm missing a lot of semantic elements. I have a bad habit of desktop-first design since I first learned to make websites long ago, I will make a point of doing mobile-first design next time, to be sure. I will be fixing the problems you listed and going through the error report as well. Thanks a bunch for your detailed response!

  1
• 

  Christopher J Mendez•50

  @cmendez20Posted about 3 years ago

  In terms of your overflow issue, your card class has a fixed width of 40rem. Thus, the screen creates a scroll bar to accommodate the 400px box + any padding/margin. I would experiment with making that value smaller when the screen is at ~450 px or smaller.

  Marked as helpful

  1

  ---

  

  Elena Martinez•80

  @nenamartinezPosted about 3 years ago

  @cmendez20 That makes sense! Thanks for taking the time to answer.

  0