Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Product Preview Card

@jvisme1991

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • 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 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

P

@tdimnet

Posted

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

@jvisme1991

Posted

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
P

@tdimnet

Posted

@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
Discord logo

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