Fullscreen on mobile problem

Design help General
1

I get an annoying problem If I choose 100 vh (or fixed position to cover the whole screen). Both options extends beyond the lower part of the browser (where the back button is).

The size seems to be based on the viewport height when neither the adress bar or the bottom bar is displayed. I of course want it to be based on the viewport as it is the moment I come to a full screen hero section or full screen navigation.

How do I solve this?

: )

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Adam_Karlsson,

This behaviour is part of css and how browsers work:

One solution is available here:

1 Like
3

Thanks @avivtech!

So do people just avoid full screen heros and navs on mobile or whats “the right thing to do”?

Also is there an easy way to tell me how I can try implementing those css tricks into Webflow? I’m kind of struggling with everything thats custom code.

: ) Adam

4

I can’t say if people avoid or not full screen sections, I can talk for myself :smiley:
I do not avoid them. Depends of course what is the content, and what interactions I have.

The CSS Tricks way needs to be tested in a Webflow project. I don’t know how and if it will work with the css that Webflow creates.

5

I just realized I got it to work the way I wanted on my portfoliosite. Almost at least. I could not get complete control of the distance between the hero and the next section. But I’m hoping no one will notice. Heres how that looks https://www.deluxestockholm.com/

: ) Adam

1 Like
6

really beautiful. nice work.

7

Thanks! Now I’m just going to try to figure out how I did it :grimacing:

8

fill-available

Use the fill-available inline size or fill-available block size, as appropriate to the writing mode.

Keep in mind: The "official warning is: This is an experimental API that should not be used in production code.

But for such small issue (With/Without small scroll) - I use this trick and that’s it.

  1. Set body height to 100%
  2. Add an id to the hero
  3. On webflow set the hero min height to 97vh (If this trick wont work on device X).
  4. Add custom code
<style>
#fill-available{
height: 100%;
height: -moz-available;          /* WebKit-based browsers will ignore this. */
height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
height: fill-available;
background: violet;
}
</style>

Example:

2 Likes
9

Thanks! I will try to figure out what all this means. If I’m lucky I will get far enough to have some specific question on how to get all the way. :v::smiley:

10

Hello @Siton_Systems do you have any idea if this solution still working?
I’ve just tried here and didn’t work properly.