Media query not working on any iphones

2 Views

I have researched this question all over stackoverflow and I’m still unable to resolve it. Please help if you can 🙂

I’m using the wordpress theme Hatch which includes a media query that doesn’t appear to be affecting any iphones (4 or 5).

Read More

Here’s the viewport statement in the html that I’m using: 

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

I’ve also tried every variation of a media query that I can think of. Currently, I’m using: 

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

    .wrap { 
    max-width: 300px;
    border: 1px solid red; 
    }
}

I’ve also tried to no avail: 

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

    .wrap { 
    max-width: 300px;
    border: 1px solid red; 
    }
}

Thanks in advance to anyone who can help with this.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Try using these

    in potrait mode

    @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) <-- 568px for iphone 5, 480px for iphone 4 -->
and (orientation : portrait) { 
   /* STYLES GO HERE */ 
}

    in portrait & landscape

    @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
   /* STYLES GO HERE */
}

  2. Oh man I am a ding-dong! The problem was that there were mismatched {}’s in the CSS code above the media query.

    Lesson: When NOTHING is working like it should and it makes NO sense, it’s almost always something small somewhere in the code. Well sometimes.

    Thanks for the help everybody!