Submitted about 1 month ago

Frontend Mentor | Product preview card component

Bhushan-Chaudhari• 100

@bhushu0910

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

What are you most proud of, and what would you do differently next time?

The implementation of the CSS part was easy and was proud of it

What challenges did you encounter, and how did you overcome them?

styling div class and div ID was a little confusing but solved it

Community feedback

HaDo Dev• 160

@hadodev

Posted 6 days ago

Hi @bhushu0910,

Nice solution. Well done!

My recomendations:

Try to acheive better the space between the elements. The <div class="right"> must have a wider padding-inline or margin-inline.
The image must have border-radius in the left side (desktop design).
I think that the main goal of the challenge is get a responsive layout. Your solution doesn't adapt for small devices.

For responsive design, check out this ressource: 1-Line Layouts - 10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be.

Keep going!!

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