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

Responsive Product-Preview-Card-Component

@chayansurana3

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


I have tried to make my solution similar to the one in the project description. Always looking forward to receiving more feedback on my work.

Community feedback

@ZeyadMohamed1805

Posted

Awesome work! 🔝🔝 Your hard work it clearly displayed on this project! 🤩 I have some tips for your website:

  1. Setting the footer's text-align to center; 😉
  2. When you set the max-width of the main-box to 43%, this compressed the content inside it because the width will decrease the more the screen size decreases! If you set the max-width to like 600px (300px for the media query), now the main-box will hold its ground in smaller screen sizes! 🤗
  3. When you set the height of the main-box to 25rem, the main-box cannot give more space for its content when the screen size decreases, resulting in content overflowing! If you replace the height with min-height (In desktop & in media query), it will adaptively increase the height of the main-box under pressure! 😎

Keep up the awesome work! I hope you find this helpful 😁

Marked as helpful

1

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