Submitted 14 days ago

product-preview-card

Taiwo Sumayyah• 90

@Sumta4real

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?

The fact that I was able to design a responsive webpage using media query and the concept of mobile-first approach

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

I had a bit of challenge with using media queries and also tryin to style the image such that not all corners are rounded as it is in the style guide.

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

Any suggestion on ways to improve particularly on the usage f media queries

Community feedback

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

Posted 13 days ago

(min-width:375px)? Mobile screens can be bigger than 375px and it's impossible to put desktop design into 400px screen. It's easier to switch to desktop version starting 500-600px or more, and it depends on the design. Hope you found this comment helpful :)

Taiwo Sumayyah• 90

@Sumta4real

Posted 11 days ago

@SvitlanaSuslenkova Yes, I do. thanks.

I would love to make some clarifications though...

In the the style guide file for this project, it was stated there that the width for the mobile view should b 375px, hence why I used the 375px as min-width or am I missing something...I would appreciate your response on this

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

Posted 11 days ago

@Sumta4real 375px is the width of images for mobile design. Your site should look good on any screen anyway.

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