CODEWITHSUNDEEP
cssmedia-queries
Georgina Beckett
Georgina Beckett

Reputation: 87

Why aren't my media queries working?

I have tried to create media queries for mobile and tablet, and they do work when I'm on a normal browser (on my desktop computer and I make the screen smaller), but do not work when I'm on an actual mobile or tablet. I have done my CSS and HTML validation so I can't imagine it'd be that.

My website is up and running on my universities server so you could view my media queries from there: http://stc110.edu.csesalford.com/ or http://stc110.edu.csesalford.com/general.css

These are my media queries:

/*Styles for screen 600px and lower*/
@media handheld, screen and (max-width: 600px) {
    #navigation { 
        height: auto;
    }
    #navigation ul {
        width: 100%;
        display: block;
        height: auto;
    }
    #navigation li {
        width: 50%;
        float: left;
        position: relative;
    }
    #navigation li a {
        border-bottom: 1px solid #ff9999;
        border-right: 1px solid #ff9999;
    }
    #navigation a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
    header {
        padding-top: 30px; 
    }
}

/*Styles for screen 480px and lower*/
@media handheld, screen and (max-width : 480px) {
    #navigation {
        border-bottom: 0;
    }
    #navigation ul {
        display: none;
        height: auto;
    }
    #navigation a#pull {
        display: block;
        background-color: #ff6666;
        width: 100%;
        position: relative;
    }
    #navigation a#pull:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

/*Smartphone*/
@media handheld {
    #navigation {
        border-bottom: 0;
    }
    #navigation ul {
        display: none;
        height: auto;
    }
    #navigation a#pull {
        display: block;
        background-color: #ff6666;
        width: 100%;
        position: relative;
    }
    #navigation a#pull:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

Upvotes: 2

Views: 2268

Answers (2)

Rounin
Rounin

Reputation: 29453

@media handheld is deprecated.

Instead, use:

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

and

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

Upvotes: 1

Prajwal Shrestha
Prajwal Shrestha

Reputation: 553

Please put below code inside head section

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Upvotes: 1

Related Questions