Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found

Submitted

Product preview card component solution with flexbox

Kinga 150

@K-Muzslay

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, I made the picture swap using HTML <picture> element, but I found another solution using CSS media query. Which is the better solution?

Community feedback

@ssembatya-dennis

Posted

I personally believe the picture tag is the best way to approach this issue because the picture tag not only helps you to swap which image to display at what media screen size but also assists the user to download only the right recommended image for his screen size which saves band width.

The other way of doing it in CSS doesn't eliminate the fact that both images are still available in the DOM but just hiding one and displaying the other at different screen sizes hence wasting band width since the user has to download both the one is sees and the one that CSS is hiding.

Marked as helpful

0

Kinga 150

@K-Muzslay

Posted

@ssembatya-dennis Thank you very much for this information. It is very useful for me.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord