Submitted over 1 year ago

Product-preview-card-component

Ankit Rajuji Waware• 150

@ankitwaware

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello, everyone! Just completed Product-preview-card-component challenge.

The project was very interesting.

Had some difficulties with centering the container.
Stuck while making the mobile design.

Let me know if i can Improve this.

Any feedback's and suggestions will be appreciated. Thanks.

Community feedback

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.
Looks like you want to be familiar with css layouts before you diving into building projects.
So you can try out the following useful resources for flex layout & grid layout

RESOURCES:

For Grid Try out this article about "css grid resources collection"
Play with grid cheatsheet
For fexbox you can checkout this article from csstricks

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

Túlio• 50

@tuliovini13

Posted over 1 year ago

Good project. But you should make your "image-box" 50% width and your ""produt-deatils" 50% width too, to align perfect 50% width each other. It is also not recommended to use 100vh for <body> height as it does not display properly on some mobile browsers, use max-height: 100%.

Marked as helpful

Ankit Rajuji Waware• 150

@ankitwaware

Posted over 1 year ago

@tuliovini13 Thanks For sugesition , i will implement it .

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