Negative Margined Left Aligned Object Causing Unwanted Overflow & Cropped Full Width Images

Design help General
1

I have created dotted line arrows with an interaction that moves them from left to right or right to left when scrolled.

To get this effect, I have to set them with negative margins.

However, with the right to left arrow, setting a negative margin is causing the screen width to overflow, and a scroll bar on the bottom appears.

Images that should span full width at 100% get cut off with this negative right to left arrow in place.

How to place a object with a negative right margin so it does not create overflow, like it is on the left?

See screen shot. and my public link:

https://webflow.com/design/woodesign?preview=9586666ddc7d1de39ffcc8054c46f150

800×558 50.1 KB

2

@angela You can turn Overflow Hidden for your section to avoid screen to have scroll.

1 Like
3

Hey! Thanks for you tip again, but I tried that and it doesn’t seem to make a difference.

4

@angela It is ‘other snippets’ section that I meant you need to set overflow hidden. It works for me. Let me know your result.

Cheers.

Well. It’s a div :smile: my bad.

5

Yes! It works now. I was turning off the overflow on the image itself. Now that I’ve turned off the overflow on the entire div itself, the scroll bar turns off.

Thanks pastiwibawa!