Media Queries not working for the iPhone 6/6S

Question

I am designing a website for someone and everything went well and whatever changes I made on the stylesheet including the media queries worked fine except for the media queries for mobile/tablets. Here is my code which I have checked now for the hundredth time and can't seem to find anything syntactically wrong with it.

    /*Responsive for iPhone 6 Begin*/

@media screen
and ( min-device-width : 375px) 
and ( max-device-width : 667px)
and (orientation : portrait) {
    #first-line {
        font-size:30px !Important;  
        letter-spacing:normal !Important;
        margin: auto;
    }

    .index-page-info {
        width: 375px;
    }

    .purechat {
        display: none !Important; 
    } 
}
/*Responsive for iPhone 6 End*/

I am developing it on WordPress using the Customizr Pro Child theme. Here is the full style : http://pastebin.com/1u1VMtEz

http://stackoverflow.com/questions/25759046/iphone-6-and-6-plus-media-queries — Chris Ryer, Jan 21 '16 at 15:11
@ChrisRyer I ave seen it and tried rhat, that makes it not work in the simulator leave alone the phone. — 4127157, Jan 21 '16 at 15:38

score 0 · Answer 1 · answered Jan 21 '16 at 15:13

0

Perhaps redundant, but do you have the responsive meta tag in the head?

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

answered Jan 21 '16 at 15:13

anba

311
3
6

Yes, that came with the theme itself there – 4127157 Jan 21 '16 at 15:21

Media Queries not working for the iPhone 6/6S

1 Answers1