Product preview card component

Community feedback

• 

  Osama Elshimy•140

  @Osama-ElshimyPosted almost 2 years ago

  Nice work!

  Here is how you can toggle between the two images:

  • Add both images to the HTML file:

  <img
  	class="desktop-img"
  	src="images/image-product-desktop.jpg"
  	alt="Product image" />
  <img
  	class="mobile-img"
  	src="images/image-product-mobile.jpg"
  	alt="Product image" />
  

  In CSS:

  .mobile-img {
      display: none; // Completely hides the image
  }
  

  • Inside the media queries:

  (max-width: 500px)
  {
      .desktop-img {
            display: none; // Hides desktop image
  }
  
      .mobile- img {
            display: block; // Displays mobile image
  }
  }
  

  A few points you can improve:

  • Every a element and img element should have an alt attribute that describes the image and what the link does. This is essential for screenreaders. You can add the alt attribute like this: alt="YOUR TEXT"

  I hope you find this helpful.

  Happy Coding!

  Marked as helpful

  1