On the “work - Abroad” page, the right side phone asset’s overflow persists even though it is set to overflow hidden. The issue only appears on the live site. Any fixes for this? Thanks!
You are referring to the horizontal scroll bar when you are on that page? Sometimes that happens when elements move beyond the viewport, like with animations.
You could try throwing everything into a div and setting that to overflow hidden or you could put the image into a div and have the positioning, sizing, and overflow applied to that.
Tried placing the element in a div and styling the div, but the -75px overflow persists- see screenshots:
I guess I could just cut the asset but would prefer a fix for responsiveness reasons
weird that it works in preview and not on the live site . . .
Hey, so I was trying to figure out another way that didn’t involve adding “overflow-x: hidden” to the body.
I added the image into a div and set that to the same top position as declared on your image, added the overflow: hidden, removed all the position data from the image, and then added some padding to the div to have the image in the correct positioning (it was cutting off the wrong corner). This got rid of the horizontal scroll.
It might be that you have the div moving over to the right, which is causing the same issue as before. Keep it at right: 0, overflow: hidden, and adjusting the image positioning with padding-left.
Well padding left on the parent of the image will push the contents of the div (the image) over to the right.
The idea of this is to use the div as a mask so you don’t have to have the image positioned absolutely. When the image is put into the positioned div the image is forced to the edge of the viewport on the right side, in order to push the image out of the viewport, you add padding to the left side of the div, this forces the image over to the right. Since the div is set to overflow-hidden it won’t do the horizontal scroll thing as it will cut off the extra of the image.