Mobile-first product preview card component

Community feedback

• 

  John Mirage•1,590

  @john-miragePosted about 2 years ago

  Hello,

  Yes, there is other ways to achieve the same result, but every other solutions basically do what picture is made for. So Instead i will try to explain you how picture works:

  <picture class="picture">
    <source srcset="path/to/desktop/image.jpg" media="(min-width: 1200px)" />
    <source srcset="path/to/tablet/image.jpg" media="(min-width: 992px)" />
    <img class="picture__image" src="path/to/mobile/image.jpg" alt="product image" />
  </picture>
  

  • The picture element is basically the container of your images. This element can be styled if you need to.
  • The img element hold the default picture (in the src attribute). This is the element you style and describe in the alt attribute.
  • The source elements are other images that can be conditionaly used if their media attribute condition are true. Their are not displayed so you do not have to style them.

  If the above example:

  • The default (mobile) picture is used if the screen width is lower than 992px.
  • The tablet image (in srcset attribute) will replace the default image if the screen width is higher than 992px and lower than 1200px.
  • The desktop image (in srcset attribute) will replace the default image if the screen width is higher than 1200px.

  Marked as helpful

  0
• 

  Galache de Toro Federico•150

  @fico444Posted about 2 years ago

  Hello, the correct way is using picture tag, but there are other ways to do it. 1- Using background-image. in the @media code block just change the url of the background-image. 2- If you want to use img tag on your html you have to use two, one with display: none (remains hidden) and other with display: inline-block. Then in the @media code block switch the values to display the correct image. I hope I could help you. ;)

  0
• 

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  Hello, Hayetj Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • details about picture follow the links https://www.w3schools.com/html/html_images_picture.asp & https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

  • You did very well but try to build the Desktop version too.

  • This is my solution of this challenge live, repo

  I hope it will work. Happy coding.

  0