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!
Read-Only link: https://preview.webflow.com/preview/lenardocilmi?utm_source=lenardocilmi&preview=9b47d014e277ed44068567cc3b8d0446
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.
Hey, thanks for the reply!
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 . . .
Strange, that could be happening because the div doesn’t have a fixed width to clip the image with.
You alternatively could try putting everything in a “site-wrapper” div like so:
This potentially might solve the problem, but I’m not sure.
Tried the site wrapper as well as setting the image to a fixed width, no success. Thanks for the suggestions though!
Was able to fix the issue on desktop by adding (body style=“overflow-x: hidden;”) to the head code. Still doesn’t work for mobile though.
I did some testing but it looks like this is work on the mobile breakpoint. Were you able to find a solution?
If you are still seeing this behavior, can you share the webflow.io subdomain and / or screenshots showing the behavior on mobile?
Thanks! 
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.
Hey, the issue looks like its persisting on mobile, here’s a screenshot and a link: http://leonardocilmi.com/work-abroad
Hey tried this but didn’t seem to have an effect on mobile, is it working for you? Thanks again
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.
Why is there a negative margin on it?
padding left doesn’t work to move the element out of the viewport does it?
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.
dude you solved it bless. Super clever work around
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
