Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product-Preview-Card using React + Tailwind

@manishsinghraj

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • 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 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

@AmanoLX

Posted

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

@manishsinghraj

Posted

@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

@AmanoLX

Posted

@manishsinghraj got it ;) Great work!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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