Vertical Height on Phone and tablet

Design help Layout & Design
1

Hi guys,

I have an issue with the vh on phone and tablet mode. I have the background image and on top I have a circle with an arrow that is at the bottom of the page. When you open the site is supposed to look in half. On desktop everything is ok. But on the phone I have to scroll a bit to see it. It doesn’t serve the purpose in that way.
Link attached.

If anyone can help that would be awesome!
Thanks guys
Constantinos

Here is my site Read-Only: https://preview.webflow.com/preview/ebc-executive-business-consultants?utm_medium=preview_link&utm_source=dashboard&utm_content=ebc-executive-business-consultants&preview=f6a58bc5f0ea1f6022c9a52d21b5ab20&mode=preview

(how to share your site Read-Only link)

2

The VH 100 does not work well on mobile as it does not factor in the iOS bar (or a similar functionality on other platforms).

You find endless tricks (= No perfect solution).

This is good solution:

3

You have set the a “minimum” height for section 2 of 100vh you have not constrained a maximum height, so when you take the header, all the padding, text etc it pushes it to above 100vh and hence pushes it off the page.
Set “height” (not min height) to 100vh to constrain this and maybe look at changing some font sizes or spacing if needed afterwards.
Kind regards
Mark

4

This looks legit but can you help me where should I put the code and if I need to change any vh in the website.
This will work also on android chrome?

Thanks

5

Tried that. Its not that. thank you

6
body { min-height: 100vh; /* mobile viewport bug fix */ min-height: -webkit-fill-available; } html { height: -webkit-fill-available; }

I added this to the custom code in the project settings

7

I have used this code from this site
https://sbx.webflow.io/100vh-viewport-safari-fix

But its not working. Maybe I am doing something wrong?

thank you

8

Is there any response to this? This is a major issue with the platform–especially if one has eCommerce projects which are derive 80% of revenue from iPhone users.

1 Like