Streaming live at 10am (PST)

Trouble with Whitespace on mobile - overflow


#1

When I navigate to the ‘Conatct’ page on mobile, the page scrolls horizontally quite a bit and there is a large empty space.
How can this be fixed?
https://preview.webflow.com/preview/anqra?preview=8867abdac2ab9becf0e3da11fdacb74e
anqra.webflow.io/contact

thanks


#2

Hi @Harris62, thanks a lot for the post. The reason why this is happening with the white space is that there are some interactions that run on page load to move some elements in from the left and the right.

The initial state of those elements are moved off to the side of the page and with an opacity of 0%. Even though the elements are invisible, they are still taking up space as they are NOT set to display none on page load.

When the page loads on mobile, the whitespace is initially created on the page but is not removed when the interaction runs.

The solution, is to make sure that for each element which is moved off of the page, let us say left or right, that the element is set to display none on page load as an initial appearance and then the first step of the interaction is to set the element to display block/flex etc.

I hope this helps, let me know, If you have any questions

For example, add a hide/show to the Top Heading to have an initial state of display none:

Then make the first step of the interaction for that class to be set to display block:

The interaction should work the same


#4

Thanks.
I fixed it by hiding the overflow on the section where the animation occurs.


#5

Hi, that will work also if that is ok for your design requirement.

In a normal case, you would not need to do that though if the initial state of the elements having left – right movement off the body are set to display none on load.


#6

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