CSS Flex, CSS variables, Media queries, Responsive Web Development

Community feedback

• 

  Davis•350

  @davislocs

  Posted over 2 years ago

  Hi Cindy! your project looks great, but i have one suggestion for you:

  • Use <picture> tag insted of <section> for wraping all of your pictures.

  Insted of this:

  <section>
        <img src="images/image-product-desktop.jpg" class="product-image" alt="Perfume image Gabrielle channel">
  </section>
  

  Do this:

  <picture>
          <source media="(max-width:800px)" srcset="images/image-product-mobile.jpg">
          <img src="images/image-product-desktop.jpg" class="product-image" alt="Perfume image Gabrielle channel">
  </picture>
  

  This will help you with changeing pictures from desktop to mobile version. Instead of having one image that is scaled up or down based on the viewport width, you can use multiple images.

  If you found this helpful please mark it as such :)

  10

  Marked as helpful
• 

  Cindy Kandie•100

  @cindykandie

  Posted about 2 years ago

  Thank you so much for this, I went down the tunnel of such semantics and I learnt a lot, highly appreciate

  00