CODEWITHSUNDEEP
ioscssmedia-queries
Spedwards
Spedwards

Reputation: 4492

CSS Media-Query Not Working

I'm working on a TAFE assignment to create a full responsive design website but I'm having a problem with the responsive part of it. When it comes to mobile devices (iPad, iPhone, iPod Touch have been tested), the only query they follow it is screen and (max-width:1000px) even though my iPad has a screen width of 798px and my iPod Touch a 320px width.

So out of all my media-queries, mobile devices only follow the top two.

@media screen and (max-width: 1180px) {
    body {
        margin: 0 5%;
    }
}

@media screen and (max-width: 1000px) {
    body {
        margin: 0;
    }
}

@media screen and (max-width: 900px) {
    body header h1 {
        right: 1%;
    }
}

@media screen and (max-width: 800px) {
    body header h1 {
        bottom: 22%;
    }
}

@media screen and (max-width: 700px) {
    body #content-wrap #right {
        display: none;
    }

    body #content-wrap #left {
        width: calc(100% - 2.54%);
    }
}

@media screen and (max-width: 690px) {
    body header {
        /* background-position: 40% -100px; */
        background-position: 40% -130px;
    }
}

@media screen and (max-width: 520px) {
    body header h1 {
        font-size: 220%;
    }
}

Is there a reason it behaves this way and is there a way to fix it?

EDIT: Desktop browsers follow all these rules when resizing.

Upvotes: 0

Views: 695

Answers (2)

Riskbreaker
Riskbreaker

Reputation: 4791

Make sure you have:

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

Upvotes: 1

Simon
Simon

Reputation: 32953

Add this to your <head>:

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

➔ Documentation

Upvotes: 3

Related Questions