Skip to content
Submitted almost 4 years ago

Article Preview Component mobile first solution

H.N.S•310
@hns-dev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

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
    @dpayne713Posted almost 4 years ago

    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•310
    @hns-devPosted almost 4 years ago

    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

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