Bottom of the website is being cut off on mobile?

Design help General
1

Hi,

The bottom section is not completely visible on the published mobile screen. The user cannot scroll all the way to the bottom of the screen. In the designer, you can see the " Community section is visible " but not on the published site. https://problem-site.webflow.io/

Here is my site Read-Only: https://preview.webflow.com/preview/metacreed-7f750c2cedb4655c46eb838c5e87e?utm_medium=preview_link&utm_source=designer&utm_content=metacreed-7f750c2cedb4655c46eb838c5e87e&preview=df99cf2e742177d472067c74f105e0fb&workflow=preview
([Here is the published link ][ https://problem-site.webflow.io/ ])

2

hi @Muhammad_Ehtsham it is visible on my side

IMG_084DA6F4E228-1
IMG_084DA6F4E228-1828Ă—1792 112 KB

3

@Stan

Screenshot_20220125_164111_com.android.chrome
Screenshot_20220125_164111_com.android.chrome1080Ă—2340 113 KB

This is what I’m seeing on 5-10 devices.

4

hi @Muhammad_Ehtsham I have no devices with Android. I have now tested website on iOS devices in Safari, Chrome, Firefox and Brave and the “community” section works as expected on all of them.

5

Hey @Stan
Thanks for taking the time and looking into it.
I really appreciate it.

It means the problem is only on the android devices,
Is there any particular solution which I should apply?

1 Like
6

hi @Muhammad_Ehtsham unfortunately I do not know. But try this forum (with advanced filter) to see if anyone had similar problem on Android, and google it as well. At least now you know that rendering issue is related to OS and not mobile browser. Only I can thing I can think right now is that it can be related to VH mean that any section set to eg. 100vh can produce unexpected behaviour. But its just pure guess as I didn’t study your structure and setup in detail.

EDIT: I have now checked youl live page (read only give 404) and I see that you have height: 100vh on problematic section. You can try to set to min-height instead to see if this help.

CleanShot 2022-01-25 at 12.24.16
CleanShot 2022-01-25 at 12.24.161004Ă—468 140 KB

7

@Stan Actually, the problem is not with the community section. I thought there might be something wrong with the community section, so I’ve deleted it. then the problem was still there with the section above the community section. The same goes for the rest of the sections.

8

hi @Muhammad_Ehtsham try min-height as I have mentioned to see what happened. The good way is to hide all sections (add class hidden) and unhide (remove class) one by one to test it. Setting only height: 100vh will cause problems on mobile landscape anyway.

9

Hey @Stan
I’ve tried adding min-height instead of the fixed height along with hiding each section one by one but was unable to figure it out.

By the way, thanks for your help. I really appreciate it.

11

thanks a lot, height: 100vh was the issue in my case.
It caused inconsistent issues on mobile.
So I went with height: 100% instead. (Note: you also have to set it on all the parent elements, including body and html)

12

hi @Denes_P my initial response was written January 2022 and since then web technologies changed a lot, and I mean A LOT. When I will focus only on CSS there is a many new units when it comes to height and width (that will help sort identical issue way easier) and many other great changes. here is article from 2022 about incoming new Units.

here is recent article about summary of changes in CSS to get some idea what was added to production lately.

Feel free to find more sources. :wink: