Hidden overflow showing in mobile browser but not in Desktop Browser

Question

Here are the screenshots of my mobile browser and my desktop browser.

My webpage has some overflow in x axis which I hid using overflow-x: hidden;

Is there any way I can make my webpage render in mobile browser, the way it renders in desktop browser i.e. full width and overflow hidden.

CSS:

body{
    padding:0;
    margin:0;
    background-image:url(../images/PaperBG/goovepaper.png);
    overflow-x: hidden;
}

Thanks.

enter image description here

possible duplicate of [Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers](http://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers) — Shaggy, May 22 '15 at 13:00

score 2 · Accepted Answer · answered May 22 '15 at 13:05

2

Try adding this:

 #main_body {
    overflow-x: hidden;
    }

answered May 22 '15 at 13:05

freewheeler

1,306
2
12
24

score 0 · Answer 2 · answered May 22 '15 at 12:56

you are having an issue with the markup, check for overflowing contents,you can use the mozilla dev tool to get a 3D view of the page and fix the overflowing contents towards x axis. If it still doesn't help, please provide a sample markup on jsfiddle, codepoen or somewhere, we can have a look.

Hidden overflow showing in mobile browser but not in Desktop Browser

2 Answers2