Product preview card component

Community feedback

• 

  Taner•190

  @tanererenPosted almost 2 years ago

  Hey, well done on completing the project!

  The easiest way to make the img responsive 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

  Let me know how you get on!

  Marked as helpful

  1

  ---

  

  P

  Maxsuel Silva•80

  @maaxgPosted almost 2 years ago

  @tanereren Hey =)

  Thanks for the tip, I've implemented it in the project. I'm going to take a deeper look at it, thanks!

  1
• 

  Jerome Dela Cruz•210

  @noonecaresman023Posted almost 2 years ago

  I would say use minmax() property, but I would advise you to understand media queries as they are still, in my opinion, the best way to do it. I noticed that you styled each h tags, try to avoid in doing so, instead take a look at the design first and check the similarities each element has, e.g your h5 and p has the same font that could've been shorten into one code. Use em, rem, % instead of px for responsiveness. Regarding h tags, use them in order so use h1 first then use h2, I'd avoid having an h1 then using h4. You're on the right track, I'd suggest take a look at the design first, note down what you can tackle in one code, search up on google of what you don't know. Keep up the good work and happy coding! Lmk, if you have any more question.

  Marked as helpful

  1

  ---

  

  P

  Maxsuel Silva•80

  @maaxgPosted almost 2 years ago

  @noonecaresman023 Hey! Thanks for the answer it was really helpful! I will make sure to make h5 and p styles the same! Thanks for the tip related to em and rem, I'm going to take a look at those for a better understanding.

  1