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:
( how to share your site Read-Only link)
This behaviour is part of css and how browsers work:
One solution is available here:
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
I can’t say if people avoid or not full screen sections, I can talk for myself
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.
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
: ) Adam
really beautiful. nice work.
Thanks! Now I’m just going to try to figure out how I did it
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.
The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.
But for such small issue (With/Without small scroll) - I use this trick and that’s it.
Set body height to
Add an id to the hero
On webflow set the hero min height to
97vh (If this trick wont work on device X).
Add custom code
height: -moz-available; /* WebKit-based browsers will ignore this. */
height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
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.
@Siton_Systems do you have any idea if this solution still working?
I’ve just tried here and didn’t work properly.