'CSS Media query not showing/hiding scrollbar

@media is giving me some problems... I can' seem to figure out how to get it to work. I would like to show the scrollbars if the height/width matches the query.

Here is what I have tried :

.content {
    width: 600px;
    height: 600px;
    background: red;
}

@media all and (max-width: 500px) {
    body{
        overflow-x: visible;    
    }
}
@media all and (max-height: 500px) {
    body{
        overflow-y: visible;    
    }
}

body {
    overflow: hidden;
}

and the fiddle: http://jsfiddle.net/Ln4tg3ct/

htmlcss


Solution 1:[1]

Either put your @media rules last in the order or make them more specific. E.g. either this:

body {
        overflow: hidden;
    }

@media all and (max-width: 500px) {
    body{
        overflow-x: visible;    
    }
}
@media all and (max-height: 500px) {
    body{
        overflow-y: visible;    
    }
}

or this

@media all and (max-width: 500px) {
    html body{
        overflow-x: visible;    
    }
}
@media all and (max-height: 500px) {
    html body{
        overflow-y: visible;    
    }
}

body {
    overflow: hidden;
}

Solution 2:[2]

Make sure that your body style is listed before the media queries. Instead of using visible use scroll. In your JSFiddle, try this:

    .content {
        width: 600px;
        height: 600px;
        background: red;
    }

    body {
        overflow: hidden;
    }

    @media all and (max-width: 500px) {
        body{
            overflow-x: scroll; 
        }
    }

    @media all and (max-height: 500px) {
        body{
            overflow-y: scroll; 
        }
    }

Solution 3:[3]

by default, the scrollbar is visible in all. did you hide it in global CSS or something?

even on mobile, it's still visible but it's small and shows when you scroll then hides automatically.

anyway, I did the opposite to hide scrollbar @media. I tried the following on Firefox, Opera, and Chrome. work fine:

@media only screen and (max-width: 975px) {

    /* hide scrollbar on Firefox */
    html {
        scrollbar-width: none;
    }

    /* hide scrollbar on Chrom & Opera */
    html::-webkit-scrollbar {
        display: none;
        width: 0px;
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ralph.m
Solution 2 jacefarm
Solution 3 Ahmed Barea

Related Questions