Design comparison
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-Agrawal811Posted 12 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 helpful1 - @Aphelion-imPosted 12 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.
0@Ritika-Agrawal811Posted 12 months agoGlad 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.
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