Skip to content
Submitted 7 months ago

Responsive Product Preview Card

Jarrod Ver Hey•150
@jvisme1991
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 most proud of the responsiveness and getting the images to swap smoothly.

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

I had some struggles with the design adjusting to a larger screen size but I was able to overcome the issues by going back through and slowing down.

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

none at the moment

Community feedback

  • Thomas Dimnet•250
    @tdimnetPosted 7 months ago

    Hi ,

    Nice job! I have a question for you, I noticed you used svh, what is it? It is a mistake or a real unit?

    You can find it at line 197:

    @media (min-width: 600px) {
  body {
    max-width: 1440px;
    place-content: center;
    height: 100svh; /* Here */
  }

    Thank you, Tom

    Marked as helpful
    0
    Jarrod Ver Hey•150
    @jvisme1991Posted 7 months ago

    I learned this from Kevin Powell. He went over the differences between vh, svh, and dvh. Here is the link https://youtu.be/ru3U8MHbFFI?si=PQH_VFq7P5GglfCE @tdimnet

    0
    Thomas Dimnet•250
    @tdimnetPosted 7 months ago

    @jvisme1991 : Ok, thanks Jarrod for the info and the link :). I'm going to have a look on that.

    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