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

Article Preview Component mobile first solution

H.N.S 160

@hns-dev

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Even though I made the body height 100vh and used overflow: hidden, it still takes more than that in mobile devices. I'd be grateful if someone enlightens me about the reason behind this.

Community feedback

David Payne 1,205

@dpayne713

Posted

that's a tricky one. Short answer is 100vh is the full device screen -- NOT the browser available window. In leu of trying to go deeper on this feedback form... check out these resources:

https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html

2

H.N.S 160

@hns-dev

Posted

Oh! I've never heard about this problem. Since I started following the mobile-first approach I felt that 100vh doesn't go well on mobile phones. It all make sense now.

Thank you for taking the time to reply.

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