Submitted 5 months ago

Responsive product preview card

jordanj03• 70

@jordanj03

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?

I am proud of using responsive font-size and making the website good on (mostly) any device I would improve my usage of media queries

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

The hardest challenge was making the page responsive, however, once I read the pathway information it became much easier :)

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

How can I improve the responsiveness

Community feedback

yas-avocad• 380

@yas-avocad

Posted 5 months ago

Hey! I would say that you don't need 3 media queries for this project. I ended up only using 1- just for the tablet/mobile view. And when it transitioned from mobile to desktop, my desktop view didn't change as the screen got bigger and bigger.

Also, I think setting the percentages for height/width are what makes the button and other content overflow when in mobile view.

:) I'm still trying to figure out responsiveness, so I'm not so sure.

Marked as helpful

konraddissake1808• 90

@konraddissake1808

Posted 5 months ago

Looks great, cheers mate

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