Submitted 4 months ago

CSS/ HTML / Media Queries responsive

jonathanPons•100

@jonathanPons

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I was able to work on my media queries, and I used ChatGPT less than in previous projects. This project required 4 hours of work.

What challenges did you encounter, and how did you overcome them?

Change the image based on screen size and properly size the images within the boxes. Work on the :active and :hover states in the correct dimensions. I used internet research for assistance.

What specific areas of your project would you like help with?

I want to better understand how to properly integrate an image according to different formats; it’s not yet clear to me, and I often find the solution by chance. I'm not yet efficient with my work time and would like to know if I could be faster and how to achieve that, as well as work on the efficiency of properties. Feedback from the community on different image formats would be greatly appreciated. Thank you, everyone.

Community feedback

RKennedyy•100
@RKennedyyPosted 4 months ago
Hey, this is a great attempt!

You can use the <picture> tag in html and you can set different images based on the size like so :
<picture> <source srcset="photo1.jpg" media="(min-width: 900px) /> <source srcset="photo2.jpg" media="(max-width: 600px) /> <img src="photo.jpg" alt="photo" /> </picture>
If the media is at least 900 px then photo1 will be displayed, if the media is at most 600px then photo2 is displayed.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
Marked as helpful
0

Please log in to post a comment

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