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

Some html, css and responsive design to build this interface

ysf 120

@youkaa04

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@krushnasinnarkar

Posted

Hi @youkaa04,

Congratulations on successfully completing the challenge!

I have a suggestion regarding your code that I believe will be of great interest to you.

There is an issue with the width of your card that can be solved by replacing your .item class's width with max-width: 650px;. Also, there is no need to add height: 500px; to the .item class; you can remove that. With these changes, your width issue will be solved.

Additionally, you have used margin to center the card, but you can also do it by adding the following styles to your body element:

display: flex;
justify-content: center;
align-items: center;
height: 100vh;

I hope you find this helpful, and I would appreciate it greatly if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!

Marked as helpful

0

ysf 120

@youkaa04

Posted

thank you so much man i appreciate it, your tips will be helpful of course@krushnasinnarkar

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