I’m working on a website build. On the homepage, I have a circle image element that is meant to slightly overflow and be cut off from the side of the screen.
I have put it into a div container and set the overflow to hidden so the “cut off” part stay cutting off. (hope that made sense? )
It looks fine in the Designer Preview mode. But once I publish it, it still creates a horizontal scroll in the browser. Any clue how I can fix this, please?
Thats site looks tip top. Try setting overflow hidden on a parent object it is relative to. I’ve been nesting all page sections inside a content div and setting overflow hidden there meaning you don’t have to do it a a section level. It’s easy to copy the content of a whole page then too.
Thanks for your compliment and thanks for your reply. yeah, I have tried the nested in a parent div and set overflow to hidden. Somehow it still breaks it. So wonder if anything I missed or any other fix I can try?
Actually, overflow hidden on the Body element does work. So you don’t need to do all that. Just hide your body overflow as it is currently set to visible
Thanks a lot HammerOZ!! the overflow-x hidden works on Body element. When i did overflow hidden, it stops the site from scrolling when i published it. But overflow-x hidden works like a charm!!