Submitted 6 months ago

Product-Preview-Card using React + Tailwind

Manish Singh•230

@manishsinghraj

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 gain more detailed knowledge on responsiveness and best practices.

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

Overdoing things in Tailwind and CSS, while truly understanding responsiveness, has been greatly aided by Kevin's videos.

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

Any kind of feedback!

Community feedback

Michel Ribbens•120
@AmanoLXPosted 6 months ago
Great solution on how to set the images based on the screen size. Didn't think of that myself!

Just one tiny thing: I never use tailwind.css but seems to me that the card div has a max width of 600 px while the rendering of the image is set to a width bigger than 640px. Shouldn't that be the same sizes?
0
Manish Singh•230
@manishsinghrajPosted 6 months ago
@AmanoLX

Thanks,

The card has a max width of 600px to match the design (independent of the image width).

However, the mobile img switches to the desktop img at 640px, considering the overall view (i.e., the background and window) and not just card width. This value is taken directly from the Tailwind documentation, where sm: >= 640px is specified. That's why I chose this value. :)

https://tailwindcss.com/docs/responsive-design
0
Michel Ribbens•120
@AmanoLXPosted 6 months ago
@manishsinghraj got it ;) Great work!
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