Submitted 10 months ago

Product Preview Card Component

Aphelion Web Development• 120

@Aphelion-im

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

The result is quite good on my desktop pc.

However, on my mobile and in Chrome dev tools/Firefox dev tools (On mobile view), a part of the top of the site is seemingly cut off.

I watched this Youtube video with Kevin Powell explaining the vh unit, and some other units to solve the problem, but that didn't help.

https://www.youtube.com/watch?v=veEqYQlfNx8 (Kevin Powell, The problems with viewport units)

On ipad, the product card, seems to vertically stretched, so the text on the right gets too much white space.

Community feedback

Ritika Agrawal• 170

@Ritika-Agrawal811

Posted 10 months ago

Hey, I inspected your code in Chrome Dev tools and noticed that height is set to 100% for body and html tags. It seems its coming from the CSS reset. I would suggest to add this height only for desktop screens.

To solve this problem I always add the height inside media query for desktop screens. For mobile screens I just give a top and bottom margin for the card.

I have completed this challenge, you may look into my code to see how I did it.

Marked as helpful

Aphelion Web Development• 120

@Aphelion-im

Posted 10 months ago

Hello Ritika,

It seems you are right! The reset, which I tried out for the first time today, seems to be the culprit. I reverted back to my trustworthy Meyer's CSS reset.

By the way...you saw the the problem in my code very quickly!

"To solve this problem I always add the height inside media query for desktop screens. For mobile screens I just give a top and bottom margin for the card."

Thank you. I am going to study this further.

Ritika Agrawal• 170

@Ritika-Agrawal811

Posted 10 months ago

Glad I could help you @Aphelion-im!

I've been working with CSS since 2020 so I have learnt to inspect mistakes quickly!

I use Meyer's CSS reset too. It's good. I also add Normalize CSS with it too.

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