Submitted over 1 year ago

Product preview card component

Fatih• 30

@mFatihGorhan

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

1) Mobile design width

I struggled with the mobile design width. I noticed that the design with a width of 375 pixels does not display properly on my Xiaomi Mi 9T phone. I found that using a media query with a width of 425 pixels provides better compatibility for the mobile design. However, do you have any other suggestions for a different solution?

2) "image-area" section and hiding images

I have some concerns with the "image-area" section. I used the "display: none" style to hide the image in the mobile view. However, this solution may have limitations in terms of content accessibility. Is there a better alternative? Do you have any other suggestions for organizing the content in a better way?

Community feedback

Anmol Singh Tuteja• 190

@anmolthedeveloper

Posted over 1 year ago

Hello, Congratulations on completing this challenge

The <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts. Example:

<picture>
<source media="(max-width: 768px)" srcset="small-image.jpg">
<source media="(min-width: 769px)" srcset="large-image.jpg">
<img src="fallback-image.jpg" alt="Example image">
</picture>

Here's a detailed reference: here

Marked as helpful

Fatih• 30

@mFatihGorhan

Posted over 1 year ago

@anmolthedeveloper Thank you very much, I learned something new thanks to you.

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