Designing with height of mobile version

Hi there,

I looking for some tips and tricks about building the mobile version of a website.
I’m often having trouble with predicting the height of the mobile screen. Let’s say of the iPhone 8. In the designer you can adjust the weight of the screen, but not the height. Why is that? Isn’t it easier to also be able to adjust as well the height? Or am I missing something here?

Hey there! Do a bit of reading on VW / VW for a start. Also delve into some showcase / template sites to see what they are doing.

1 Like

The height is adjusted automatically by the content you’re having on your page. In case you just want content for the full height of the device (and nothing more), wrap your content inside a div with the height of 100vh, which is 100% of the height of the viewport. :slight_smile:

Thank you for the reply.

When I open a site in the mobile safari browser there is always this block of the app on the bottom. And it blocks the bottom of my site when I put it on 100VH. How do you deal with this?

Ah, sorry, it does seem that Safari intentionally doesn’t let the design to go the full height.

As mentioned in this thread; html - CSS3 100vh not constant in mobile browser - Stack Overflow you could try using ‘min-height: -webkit-fill-available;’ instead of 100vh.

1 Like