Streaming live at 10am (PST)

Image overflow issue


#1

Hello,

I have an overflow issue on my site and I have no idea how to fix it. I've tried many adjustments that haven't worked.

The issue image is the pair of headphones in the "Audio Production" area about halfway down the page. There is a div with its Position set to Relative. Inside that div there are two headphone images with their Position set to Absolute. One headphone image has less drop shadow than the other one. It creates a half decent hover effect. The overflow issue occurs at the 991px screen size.

https://preview.webflow.com/preview/finsweet104?preview=15850140e3d12bdcca3b3893c74bbea9

http://finsweet104.webflow.io/

This is the only issue that's preventing me from delivering this site! Thanks in advance.


#2

This is a very quick fix! I recommend building (and in this case moving) everything inside a wrapper element. Essentially, this is a div that contains everything on the page. Since the div's width is set to 100% and the overflow is set to "hidden", anything that spills off will be contained perfectly. In the example below, I've created a wrapper on your webpage, and I've also set a maximum width of 1900px (and centered the element!) so the website doesn't get ridiculously stretched on larger displays. :sunglasses:

Note: In the video, you'll see me get tripped up while dragging and dropping (from about :31 to :33). A context menu popped up when I clicked the wrong mouse button. This isn't an actual step; it's me fighting my mouse for control! :laughing:


#3

Looks awesome now. Thank you for the video and thank you for your help!


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.