A Responsive product review webpage using HTML and CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 6 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your project looks great!

  I have a suggestion about your code that might interest you:

  📌 You can use the <picture> tag when you have different versions of the same image.

  Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

  Example:

  <picture>
      <source media="(min-width: 768px)" srcset="{desktop image path here}">
      <img src="{mobile image path here}" alt="{alternative text here}">
  </picture>
  

  I hope this helps!

  Other than that, excellent work!

  Marked as helpful

  0
• 

  P

  Koda👹•3,830

  @kodan96Posted 6 months ago

  hi there! 👋

  If you meant that there's scrolling on your page it's because you applied height: 100vh on your <main> tag. this means this tag will always take up the entire screen, no matter how much content it contains.

  This is a good approach for centering your content when the entire page is 100vh or smaller than that, but since your .attribution is outside of the main tag (which is a big red flag btw, all your content should be wrapped inside the header, main or footer tags), it causes overflow and scrolling.

  you can either place the .attribution inside the main tag and give your card some margin to separate them from each other or you can give the attribution position: absolute; and make it stick to the bottom of the viewport.

  Hope this helped 🙏

  Good luck and happy coding! 🙌

  Marked as helpful

  0