Grow your CSS skills. Land your dream job.

Media Queries – NEED HELP

  • # September 20, 2013 at 7:52 am

    I am working on our company web site, and it needs to work on several devices. However, I’m having issues with conflicting media queries and am hoping someone can provide me with a solution. I have to make this work on iPad, iPhone, Android phones, Nexus tablet, Windows tablet, Windows phone, desktop and laptop. I am having a hard time finding media queries that support the Windows tablet. The one I tried is conflicting with the media query for Android and Nexus. I’ve searched online and did find lists of media queries, which were helpful in some respects, but nothing that helps prevent the conflicts. I’ve even tried different breakpoints, but it’s almost as if the Android and Windows devices share, and I do not want them to. Also, I need to be sure that there are landscape and portrait modes for tablets and phones, and that has also been a challenge. Any help would be greatly appreciated! Thanks!

    # September 20, 2013 at 8:06 am

    Are you including the device width meta tag in the <head>?

    Media queries should not be based on devices anyway but rather at specific breakpoints where the layout needs it.

    What are MQ you currently using?

    Other than that it could be down to pixel densities but that seems unlikely.

    http://css-tricks.com/snippets/css/retina-display-media-query/

    # September 20, 2013 at 8:15 am

    I have tried quite a few things. Here is what I have. I do have the device width meta tag, but let me know if it is incorrect, since I have so many devices that need to work with the site. I’m also including all the media queries. If you can provide me some help, I would appreciate it. There are supposedly two sizes for Windows tablets, so that’s where there are a few media queries for that device in landscape and portrait. I’ve used media queries for awhile now, but never had to include this many devices. I’m trying to find a way to make this work across all. Thank you for any help you can provide.

    META IN HEAD:

    /* desktop */ @media (max-width: 979px)

    /* iPad in portrait———– */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)

    /Ipad Resolution Starts Here – landscape/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape)

    /* desktop and Nexus 10 */

    @media (min-width: 1200px)

    /* For Android and Nexus */

    @media only screen and (min-width: 1200px) and (max-width: 2560px) and (-webkit-min-device-pixel-ratio: 2.0) and (-webkit-max-device-pixel-ratio: 2.0)

    /* for Nexus 10 portrait */ @media only screen and (min-width: 750px) and (-webkit-min-device-pixel-ratio: 2.0) and (-webkit-max-device-pixel-ratio: 2.0)

    /* for iPhone 4 portrait*/

    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)

    /* for iPhone 4 landscape – affecting Windows phone landscape*/

    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape)

    /* For Windows Tablets2 – Landscape – NEW */ @media only screen and (min-width:1200px) and (max-width:1280px) and (orientation: landscape)

    /* For Windows Tablets1 – Portrait – NEW */ @media screen and (min-width:768px) and (max-width:768px) and (orientation: portrait)

    /* For Windows Tablets2 – Portrait – NEW */ @media screen and (min-width:720px) and (max-width:720px) and (orientation: portrait)

    /* For Windows Phones – Portrait – NEW */ @media screen and (max-width:400px) and (orientation: portrait)

    /* Windows Phone landscape */ @media screen and (max-width:480px) and (orientation: landscape)

    # September 20, 2013 at 8:20 am

    I do have the device width meta tag, but let me know if it is incorrect

    Where?

    I see the media queries which I assume are salted amongst your CSS stylesheet.

    If you have that lot in your head then they aren’t going to work.

    Finally, I think you would have to put those MQ in order not by device but by screen width.

    # September 20, 2013 at 8:23 am

    I have so many devices that need to work with the site. I’m also including all the media queries.

    I get that but you are designing based on moving goalposts. You MQ will never match every device out there and new ones are out every day.

    I’ll say it again:

    Media queries should not be based on devices anyway but rather at specific breakpoints where the layout needs it.

    # September 20, 2013 at 8:26 am

    The viewport line is in the head of my documents. The media queries are in an external style sheet. So, I need to order them by device width and see if that helps? I can try it. The reason I have the devices listed out is so I know what works where thus far. I didn’t have issues until we had to put the Windows tablet into the mix. I haven’t been able to find media queries ANYWHERE online for those particular devices, so it’s been frustrating.

    # September 20, 2013 at 8:29 am

    Also, you say to order them by width. Do I go from smallest to highest width? Do I base that on min or max width?

    # September 20, 2013 at 9:23 am

    If you let us see the site we can inspect it for ourselves and make sure everything is OK. Do you have a link?

    Also, you say to order them by width. Do I go from smallest to highest width? Do I base that on min or max width?

    http://css-tricks.com/logic-in-media-queries/

    # September 20, 2013 at 9:35 am

    Thanks! I’m starting to make some headway, but if I get stuck, I may need your help again and can send you a link to our test site. It’s a work in progress right now.

    # September 20, 2013 at 10:48 am

    To me it’s insanity to be chasing or trying to target every possible device view-port width and or screen orientation for each, and as time goes by there’s going to be more of them. After experimenting for some time, I came up with this.

    The main page container max-width must be dimensioned in em value. If we start with baseline of 1em so we would have this: body {font-size:1em}

    So if my body baseline is 1em = 16px then 16 is my divisor and additionally I subtract 1 from result so it triggers at 1em less width of my intended media query min-width. Based on that, the media queries will look like this and should cover most if not all your needs.

    html head section

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

    css file

    /* 320 width =(320/16)-1 */
    @media (min-width:19em) {
    your styles
    }
    /* 480 width =(480/16)-1 */
    @media (min-width:29em) {
    your styles
    }
    /* 768 width =(768/16)-1 */
    @media (min-width:47em) {
    your styles
    }
    /* 1024 width =(1024/16)-1 */
    @media (min-width:63em) {
    your styles
    }
    /* 1280 width =(1280/16)-1 */
    @media (min-width:79em) {
    your styles
    }
    /* 1440 width =(1440/16)-1 */
    @media (min-width:89em) {
    your styles
    }
    

    If your baseline is .875em, your divisor will be 14

    # September 20, 2013 at 10:53 am

    Thank you. I will give it a try. I’m assuming that it’s still ok that I used px within my styles? Media queries are still a little new to me. Just started diving into them recently.

    # September 20, 2013 at 11:03 am

    No, use em’s and make sure your content container or page wrap whatever you call it has max-width in em value. If your page wrap has max-width:960px then at 1em baseline that max width would be 60em. So whatever your max width of page wrap is now in px, divide it by proper divisor calculated of off the baseline and that would be your wrap em max-with.

    # April 18, 2014 at 11:08 am

    jurotek,
    what about landscape mode for tablets and for smartphones does your list take this into account as well?

    # April 18, 2014 at 11:09 am

    jurotek,
    what about landscape mode for tablets and for smartphones – does your list take this into account as well?

    # April 18, 2014 at 1:11 pm

    what about landscape

    @drotar, I forbid you to ever think about landscape!!! :)

    But seriously, Responsive Web Design is all about using Media Queries, Flexible Layouts and Fluid Images.

    So if your layout/grid is flexible, it should fit whatever viewpoint size you have. Doesn’t matter if the phone is in portrait or landscape orientation.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".