I’m currently building a website for a client, and I was experimenting with a creative landing page. The results I have so far are actually pretty good I think, but I have one minor bug I can’t fix.
I’m working with a zoom effect. You see three pictures that become bigger when you hover over them with your mouse. Those images are in a div, and the overflow of the div is visible, because otherwise “rock that town” wouldn’t be visible when zoomed in on. The three div’s as a whole are also contained in one large div that simply has the size of your screen. The overflow of this div is set as “non-visible” to prevent the bug I still have:
In the Webflow preview everything looks fine, but when you go to “mindyourwords.webflow.io” instead (on a pc (!) haven’t got to the mobile part) and you hover over the most right image, you see that on the bottom of your screen a horizontal scroll bar appears, and if you scroll to the right, you can indeed see a part of the picture that I tought would not be visible due to the “non-visible” characteristic of the “main div” that has the size of your screen.
Somebody who knows the answer?
(A possible explanation is that this “main div” with the screen size also becomes bigger, but than the background of the excess part should be black, and it isn’t so …)
Thank you very much!
I know it’s just a minor bug but … (didn’t really know if it’s a bug or a design mistake)
I am on a phone right now so I can’t really view the source code/preview link of the website but I think I might know what’s wrong given your description and the live website.
So you said that you’ve set the overflow to hidden on the outer div. That means the inner content won’t be displayed IF it overflows the margins of the outer div. But that’s not the case.
The width of the outer div is flexible (even though the overflow property is set to hidden). It’s not a fixed length. That means it’ll resize normally (on page resize, when its content get bigger/smaller, etc).
So what’s happening is that the outer div itself is getting bigger and thus overflowing the body of the page. Which makes the scrollbars appear.
There’s nothing to do with z-index and shadows.
A possible solution would be to set the width of the outer div to be 100% so it doesn’t overflow the body of the page (didn’t test it). But there certainly better solutions.
The easiest solution would probably be to make the outer div a flexbox (display: flex) and then making each image one third of the width (33.3333%). Then change the width of the hovered image to something like 50%. You won’t need overflow: hidden anymore.
Flexboxes may seem a bit complex at first but they are really powerful for layout. You might want to search for a flexbox tutorial on Google to learn more. I think there’s a tutorial on it in the webflow blog or help center.
Again, that’s just a shot in the dark as I didn’t view the code/preview link. I might be completely wrong but hopefully it’l make some things clear and give you a direction.
P.S.: sorry for the typos I’m not a native English speaker and typing on a smartphone keyboard sucks. Feel free to send me a message if you didn’t understand something!
I didn’t mention it, but I actually am already using flexbox right now. The width of this outer flexbox div is set to 100% as well. Maybe I’ll just rebuild the page, I might have overcomplicated the design. Maybe that’ll fix it.
