Submitted about 1 year ago

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

sass/scss

Julien Gilbert•850

@juliengDev

A solution to the Product preview card component challenge

Preview Code

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.

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Andi Fachriansyah Dwipangga•710
@fachridp
Posted about 1 year ago
1. 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.
2. 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

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