Android scroll problem due to Overflow on Body set to Hidden

Design help General
1

Hi everyone,

below webpage’s scroll behaviour is not working on Android mobile phones. There is a same issue here but I could not solve the problem.

here is the site: www.emlakcep.com

2

Hi @delizade, thanks for the post. It looks like the Body is having a styling of overflow set to hidden on mobile portrait.

The mobile view will not scroll, if the body class is set to overflow hidden. Set that to overflow visible, and that should fix it.

I hope this helps!

3

thank you @cyberdave for your help. (I did that and wait for result from a friend who uses android phone)

4

This time user can not scroll throug bottom of the page. I mean user can’t see store buttons and footer. After quote part is not reachable. I’ve removed section that contain quote and store buttons but it didnt work @cyberdave

5

Hi @delizade, could you please help to share the site read-only link? Share a read-only link | Webflow University

In taking a look at the published site, there is a lot of fixed height styles and relative or absolutley postioned elements having fixed position offsets. There seems to be some styling there that Android is not liking very well.

I would recommend to change styles to use as few fixed height elements and relative or absolutely positioned offsets applied to styles on mobile view, rather use Auto height for sections and containers.

6

hi,
here is the link: Webflow - EmlakCep

7

Hi @delizade I was just looking in to your site and I noticed that you’re using a lot of pixel height settings for containers and section elements like in this example:

1524×1058 179 KB

Those should just need to be set to Height: auto as the fixed pixel height will inhibit scrolling especially since the parent Section also has a fixed pixel height and is set to overflow: hidden

1524×1057 199 KB

8

Thank you @Waldo I will try to fix them.

9

@Waldo I fixed them as auto but it didn’t work. But after that I realised that there are another two divs in section2 and section3 with same class name “secdiv”. that class was display:none overflow:hidden and position: Relative. If I remove that div the problem is gone. So, I changed it as position:fixed and top:-3000 (yeah I know absolutely clumsily) and the problem is fixed by that.

I don’t understand why an invisible component causes a visual problem though.

thanks for your help @Waldo and @cyberdave

10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.