Responsive product card component (only html and CSS)

Community feedback

• 

  Taner•190

  @tanererenPosted almost 2 years ago

  Hey, well done on completing the project!

  The easiest way to change the picture would be to use the <picture> HTML element - it's a really useful tool that allows you to have multiple images that changes with the viewport width. It saves on writing loads of CSS media-queries for the image!

  <picture>
    <source media="(min-width:750px)" srcset="images/image-product-mobile.jpg">
  
    <img src="images/image-product-desktop.jpg" alt="">
  </picture>
  

  The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).

  The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags match

  You can find more information: here - w3schools and here - MDN

  Marked as helpful

  2

  ---

  

  Stathis Renieris•30

  @Stathis-RenierisPosted almost 2 years ago

  @tanereren Wow man! You literally saved me! This is an absolute save! Thank you very much!

  1

  

  Taner•190

  @tanererenPosted almost 2 years ago

  @Stathis-Renieris No worries at all! Let me know how you get on

  0

  

  Stathis Renieris•30

  @Stathis-RenierisPosted almost 2 years ago

  @tanereren Ok, already fixed. Thanks again mate!

  1