Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Media Queries Not Applying On iPhone

    Hi,

    I've got the following media queries:

    Code:
    @media all and (min-width: 800px) {
     #states{width: 800px; margin:0 auto;}
     #states1{float: left; align: center;}
     #states2{float: left; align: center;}
     #states3{float: left; align: center;}
     #states4{float: left; align: center;}
     #states5{float: left; align: center;}
     #little-screen{display: none;}
     #small-line-break{display: none;}
     }
    
    @media all and (max-width: 800px) {
     #ImageMap_1_1163747142 {display: none;}
     #big-screen{display: none;}
     }
    When on the iPhone I want the max-width query to take effect. However, the min-width query does instead! Help!

  • #2
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I just started using media queries, I'm only using max-width, maybe you can use max and min, but not sure. But I did find out through trial and error that order does matter. For example, I have:
    @media screen and (max-width: 750) {
    .....
    }
    @media screen and (max-width: 480) {
    .....
    }
    Reversing it with 480 first caused problems.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by curtinj View Post
    I just started using media queries, I'm only using max-width, maybe you can use max and min, but not sure. But I did find out through trial and error that order does matter. For example, I have:
    @media screen and (max-width: 750) {
    .....
    }
    @media screen and (max-width: 480) {
    .....
    }
    Reversing it with 480 first caused problems.
    Changing the two around made no difference - thanks for the suggestion though.

    Any other advice from anyone?

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Try this,

    Code:
    @media only screen and (max-width : 800px) {
    Your css..
    }
    Code:
    @media only screen and (min-width : 800px) {
    Your css..
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •