@CarlHumm
Posted
Hi there
It looks like the distortion and extra space is coming from an element with a class of .success-message, which is positioned off-page using transform: translateX(800px).
The solution would be to control the overflow by setting the position to relative and the overflow property to hidden for the parent container of the overflowing content, in this case that's main.
So just do something like this.
main {
position: relative;
overflow:hidden
}
I see you tried to set overflow-x:hidden to the body. You may be thinking, why can't I just do the same as above for the body, like this:
body {
position:relative;
overflow-x:hidden;
}
This will not work. Whilst I'm not exactly sure on the details I believe it pertains to something called Overflow Viewport Propagation
To get this to work you would need to set the root HTML elements overflow property to anything but visible and then assign an overflow property to the body - however this is highly discouraged as it disables scrollbars and impacts accessibility
Good luck
Marked as helpful
