Responsive Product Card

Community feedback

• 

  Ayobami Ikuewumi•850

  @IkuewumiPosted 9 months ago

  Hi @ParthUON. Awesome Project 👏

  About your question, I was impressed by the use of the content property, I always thought it was only used in pseudo-elements. But the answer here would be to use the picture element,

  This is an example

  <picture>
      <source srcset="...desktop.jpg" media="(min-width: 40rem)">
      <img src="...mobile.jpg" alt="">
  </picture>
  

  picture {
      display: contents;
  }
  
  picture img {
      width: xrem;
      // more
  }
  

  What happens is that the browser switches out the src of the image when it hits a specified media query

  A caveat though is that the content that is shown is only the image tag, so I would suggest, putting any styles on the image tag

  You can learn more about the picture tag on the MDN docs

  And btw what do you need parallax for?

  Happy Coding, Ayobami

  Marked as helpful

  1

  ---

  

  ParthUON•100

  @ParthUONPosted 9 months ago

  @Ikuewumi thank you for your advice. i will keep in mind next time. i want to create my portfolio website using parallax effect.

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 9 months ago

  Hello @ParthUON!

  Your project looks great!

  I have a suggestion about your code that might interest you:

  📌 You can use the <picture> tag when you have different versions of the same image.

  Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

  Example:

  <picture>
      <source media="(max-width: 460px)" srcset="{desktop image path here}">
      <img src="{mobile image path here}" alt="{alternative text here}">
  </picture>
  

  I hope this helps!

  Other than that, excellent work!

  0