Elements overlap when adjusting browser height

[asaik7 (Adam Saik)]

Hi there,

I am trying to create a page that has multiple sections set to a height of 100vh so that each section fills the browser window when it comes into view. My problem is when I resize the window height the text and image elements do not stay stationary within the section and overlap to another section instead.

To give you a better idea of what I am trying to achieve have a look at this site: https://yalantis.com/
Notice how when you scroll down to the “Homesway” and “Talos” sections and you resize the height of the window the image and text elements stay stationary. This is what I am trying to achieve.

Here is my share link and I what I have so far if it helps:
https://preview.webflow.com/preview/adam-saiks-portfolio-896e8e0e6f31ec703a?preview=61a934933a7781c42e0476d612e3fa6c

Btw, “Work Copy” is the working page related to this issue.

[asaik7 (Adam Saik)]

Can any of the experts chime in on this? I just need to resolve this one issue.

[Pasint]

Hi @asaik7

I’m no expert, but you might need to adjust your width padding for the different sections in mobile view.
The hero section has left and right padding of 200px and this kinda moves your layout around. Here the padding covers more than the screen width (see in green in screenshot). You’ll need to adjust that and might want to also adjust this parameter in the various div you use in each section too.