Mobile-First Order Summary Component

Community feedback

• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  Hi polukarp, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.

  To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

  1. Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

  2. Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

  Feel free to choose one of the two!

  The rest is great!

  I hope it helps... 👍

  1
• 

  Adeola Ganiu•1,320

  @DeolabestPosted about 2 years ago

  Hey @polukarp, Congratulations on completing this challenge!

  Here is my feedback:

  • It's not a good practice to use px to set font-size. Instead use rem units, they are great since they adapt better to the font-size the user will set in the browser settings. You can convert from px to rem here: https://pixelsconverter.com/px-to-rem.

  • The price change hover effect is missing. Solution:

  .price-edit:hover {
      text-decoration: none;
      color: hsl(245, 83%, 68%);
  }
  

  Keep doing a good job!

  1