Submitted 2 months ago

Product-Preview-Card-Component Public HTML-CSS-BEM-SASS-RESPONSIVE

Gilbert• 290

@juliengDev

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?

Reflecting on the project, I am particularly pleased with how I implemented responsive design principles to ensure the product preview card component functions seamlessly across diverse devices. This involved using flexible layouts and media queries to adapt the interface from mobile screens to larger desktop displays, enhancing user accessibility and interaction.

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

One of the main challenges I faced was mastering the element for loading different-sized images based on media queries, requiring focused learning and experimentation to integrate effectively into the project.

What specific areas of your project would you like help with?

I don’t need help with any specific areas of my project at the moment.

Community feedback

Andi Fachriansyah Dwipangga• 710

@fachridp

Posted 2 months ago

You can add style property flex-wrap: wrap to card__body__price to prevent card__body__price__full from escaping the card__body container if the browser width is reduced.
Avoid using fix values for html elements. If you want to display a different size for each screen size, you can use the max-width or calc() method in it to get better results (watching tutorials on youtube about it will help you a lot later).

But you've done a great job, keep learning and practicing by continuing to work on new projects to improve your frontend developer skills.

Marked as helpful

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