Product preview card component using Flexbox (Responsive)

Community feedback

• 

  andreimaier•180

  @andreimaierPosted over 1 year ago

  Congratulations on completing the challenge! You're right that you only learn by doing it yourself! Keep up the good work!

  Marked as helpful

  2

  ---

  

  Spirit•220

  @git-riteshPosted over 1 year ago

  Thanks!@andreimaier

  0
• 

  Jonatas Martins•100

  @jonatasolmartinsPosted over 1 year ago

  Congrats man! Feel tips, you can the picture element and change the image based on the media query.

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

  In the example above the mobile image will be used until the screen get bigger than 600px and then the image is replaced with the image in the source element.

  The last tip is to use the before or after pseudo classes to place a svg image on a element.

  <button class="add-to-cart">Add to Cart</button>
  

  And then in the css file

  button::before {
      content: url(/images/icon-cart.svg);
  }
  

  Before means that it will place a content (SVG image in this case) before the first child of the element (my text in this case) The result will be same as if I had put my SVG file/tag in my html but it makes my html more cleaner cause SVG tends to be very big.

  My last tip is to look at someone else code after you finished your to get more insights on how to make things better, I do that and learn lots things that I can apply in my next challenge.

  Congrats again and happy code!

  Marked as helpful

  1

  ---

  

  Spirit•220

  @git-riteshPosted over 1 year ago

  Thank you so much for reviewing my code and giving these awesome tips!@jonatasolmartins i'm gonna use it right away! i'll remember your words "look after someone else's code for more insights" Thanks Again : )

  0

  

  Spirit•220

  @git-riteshPosted over 1 year ago

  This isn't working for me.

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

  Instead of this added both the images inside the <picture> element. And for the Mobile Design i set display:none; to Desktop image & vice-versa for the Desktop Design. @jonatasolmartins

  0