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.
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.
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!
