Skip to content
Submitted 7 months ago

Responsive product preview card

jordanj03•70
@jordanj03
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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-avocadPosted 7 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
    1
  • konraddissake1808•110
    @konraddissake1808Posted 7 months ago

    Looks great, cheers mate

    1

Please log in to post a comment

Log in with GitHub

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