CODEWITHSUNDEEP
htmlcssoverflow
matt
matt

Reputation: 1025

overflow-x refusing to show?

I am working on a site and I cant manage to get the overflow-x to scroll when the window is shrunk down (emulating a tablet/mobile). 

html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: auto;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: auto;
}

Is all I can think of that would be controlling this. You can view the site HERE.

Thank you in advance for any suggestions.

Upvotes: 0

Views: 309

Answers (2)

M Rostami
M Rostami

Reputation: 4185

if you want to have element scroll able you should define width for it or it's parent .
so add min-width to your html style : 

html {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow-x: auto;
   min-width: 1000px;  # this is when html will be scroll-x
}

Upvotes: 1

Sean
Sean

Reputation: 6499

You have a min-width set on your #wrapper div, which technically means it will never have any overflowing content.

Set the CSS for the wrapper to the following:

#wrapper {
    margin: 0 auto;
    max-width: 2560px;
    min-width: 900px;
    overflow-x: auto;
    padding: 0;
    position: relative;
    width: 100%;
}

And remove the overflow properties from the CSS for the body & html elements, they are both unnecessary.

After making the above changes you should be able to scroll horizontally on mobile devices, the min-width value above will likely need changing though.

Upvotes: 1

Related Questions