Submitted 2 months ago

CSS/ HTML / Media Queries responsive

jonathanPons• 100

@jonathanPons

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

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

@RKennedyy

Posted about 2 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 :

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

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