Responsive product preview card using picture tags and flexbox

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 4 months ago

  Hey there! 🙋🏽‍♂️

  Congrats on finishing the challenge! ✅

  Your project looks awesome!

  Here's a tip that might interest you:

  📌 When you have different versions of the same image, consider using the <picture> tag. Using it as a background works, but in this case, the image is not only decorative, it's part of the content.

  This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.

  Example:

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

  Hope you find this useful!

  Great job overall!

  Marked as helpful

  0

  ---

  

  P

  Eli Silk•660

  @elisilkPosted 4 months ago

  @danielmrz-dev, thank you for the excellent suggestion and clear example. I have replaced my background images with the picture tag as you suggested and I think it's a much better solution. I appreciate the help!

  0
• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  @elisilk

  Hiya! 👋

  Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

  Things I like about your solution 🎉

  • Use of semantic HTML elements
  • Clear descriptive CSS classes
  • Use of CSS custom properties

  Things you could improve ✍️

  • You could add a min-height: 100vh to your body element so it takes up the full height of the viewport while still being able to grow when the content inside it grows.

  • Try using using relative CSS units like rem and em they make your layout more adaptable.

  • I recommend looking into the picture element to achieve the desired effect of having different images on different viewports.

  • I recommend using a p tag for the category.

  I hope you find my feedback helpful! 🌟

  Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

  Happy coding! 😎

  Marked as helpful

  0

  ---

  

  P

  Eli Silk•660

  @elisilkPosted 4 months ago

  @DylandeBruijn, wow! Thank you for looking so carefully at the code and making such great suggestions. I implemented them all and I think my solution is much better as a result. I really appreciate the help!

  0