Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Product card

Jhef 50

@imjheef

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


  • Which areas of your code are you unsure of?

The layout of the page and the media query

  • What did you find difficult while building the project?

Working with the <img> and styling and @media query

Community feedback

@caarlosdamian

Posted

Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

I did notice some overflowing within screens below 375px but pretty much well done awesome work, very clean coding love you use css variables keep it going. maybe adding some padding to the card will fix it. always test your apps under 320px minim screen width since some people may have lower screens.

I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

Happy coding! 🚀

Marked as helpful

0

Jhef 50

@imjheef

Posted

@caarlosdamian thank you for your comment! I found the bug that was causing the overflow and other design issues with the <main> and {.container} class, will work on it and update, much appreciated.

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