Skip to content
Submitted 4 months ago

product-preview-card

Kal Wick•110
@kalWick01
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?

guys if you can give me some suggestion on when i try to zoom the browser the right side product detail box going down , how can i solve that? and on the mobile devise it;s not good

Community feedback

  • Paweł Chudecki•840
    @SoulRvr29Posted 4 months ago

    You have set width: 40% in the .container class, so the card can only occupy 40% of the width and when the screen is reduced, it does not fit, so the right side slides down. Remove width: 40% and instead set e.g. max-width: 600px.

    In the body you have set height: 100vh, never set a fixed page height, because if something is too big it will be cut off, instead set min-height: 100vh.

    Marked as helpful
    0
  • Juan•480
    @JEWebDevPosted 4 months ago

    Hello @kalWick01!

    You nailed the spacing! It looks awesome!

    The issue you are facing is because you use percentages on your widths and heights.

    When zooming, the size of the window does NOT change, so these elements keep the same size.

    Found the answer here

    It is a link to the answer from stackoverflow

    If my answer was helpful please mark it as helpful :D

    Happy coding!

    Marked as helpful
    0
  • Kal Wick•110
    @kalWick01Posted 4 months ago

    i forgot the shop icon on button, hell no

    0

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