CODEWITHSUNDEEP
cssmedia-queries
mwilson
mwilson

Reputation: 12900

CSS Media Queries For Mobile Devices Not Working

I am working with media queries to start making my site more responsive. However, the media queries work perfectly fine on my PC (Chrome) but when viewing on a mobile device (iPad and iPhone) the media queries don't seem to take effect. I have the viewport tag in the head but am guessing I'm missing something else....

CSS

@media (min-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    #mainText {
        color: pink;
    }
}
@media (min-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #mainText {
        color: blue;
    }
}
@media (min-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #mainText {
        color: red;
    }
}
@media (min-width:961px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #mainText {
        color: yellow;
    }
}
@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */ 
    #mainText {
        color: green;
    }
}
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    #mainText {
        color: purple;
    }
}

HTML

<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<div id="mainText">
    <h1>Text</h1>
    <h2>Text</h2>
</div>

Upvotes: 2

Views: 1274

Answers (2)

Daniel
Daniel

Reputation: 1145

As your queries might overriding itself try something like that specify min and max widths for your queries that are always 1px smaller / bigger than the previous one 

 @media (max-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    #mainText {
        color: pink;
    }
}
@media (min-width:321px) and (max-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #mainText {
        color: blue;
    }
}
@media (min-width:482px) and (max-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #mainText {
        color: red;
    }
}
@media (min-width:642px) and (max-width:1024px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #mainText {
        color: yellow;
    }
}
@media (min-width:1025px) and (max-width:1280px){ 
    /* big landscape tablets, laptops, and desktops */ 
    #mainText {
        color: green;
    }
}
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    #mainText {
        color: purple;
    }
}

Upvotes: 0

Isabel Inc
Isabel Inc

Reputation: 1899

There seems to be a filter in your css

filter: brightness(1%);

Now because you're not adding any vendor prefixes for webkit, chrome is just deciding to ignore it. You can either remove this rule or add the following to your css.

-webkit-filter: brightness(1%);
filter: brightness(1%);

Cheers and Happy coding!

Upvotes: 1

Related Questions