Responsive Product Preview Card Component with HTML,CSS

Community feedback

• 

  Yasmine•700

  @Yasmine10Posted over 1 year ago

  Hi @cacti00

  An easy way to display your image and content side by side is to use grid, you could do something like this in your .product-card class:

  display: grid; 
  grid-template-columns: repeat(2, 1fr);  /* use grid-template-columns: 1fr; for mobile view */
  

  I also saw that you're using divs with an img inside to display the image in your html. There is an html element for that actually: '<picture>'

  Here's an example of what that would look like for this project:

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

  Hope this is helpful 😊

  Marked as helpful

  3

  ---

  

  Charles•170

  @cacti00Posted over 1 year ago

  Thanks this was helpful @Yasmine10

  0
• 

  Rebecca Padgett•1,840

  @bccpadgePosted over 1 year ago

  Hello @cacti00. Congratulations on completing this challenge 🎉 !!

  To answer your question you can use CSS Grid

  More info on CSS Grid📚

  CSS Tricks - CSS Grid

  Here is my solution to this challenge

  I followed Kevin Powell's YouTube tutorial on the Product Preview Component and he explains how to use the picture tag to change the images as well.

  More info on HTML Picture Tag📚

  W3Schools

  Hopes this helps you and don't hesitate to reach out to me if you have any questions ✌🏼

  Marked as helpful

  1

  ---

  

  Charles•170

  @cacti00Posted over 1 year ago

  I saw Kevin’s tutorial on this challenge but I just decided to do it myself to see the areas I lack in css.

  With the resources you just provided I’m sure I will be using grid more often Thanks @bccpadge

  0