Grow your CSS skills. Land your dream job.

@import ipad only landscape mquery conflicting with desktop mquery

  • # May 11, 2013 at 3:08 pm

    good morning, wondering if anybody had a solution. i am using adaptive images for my responsive site and would like to have a separate css page for the iPad retina and normal landscape mode. i need to move the artwork for this page to be more precise than the desktop css offers. Problem i am having is that i can’t quite get it to work and was wondering if someone knew the answer (which someone on this wonderful site always does.) what i have now in my mquery css is:

    /* phone-landscape */
    @import url(“phone-landscape.css”) only screen and (min-width:321px) and (max-width:480px);

    /* tablet */
    @import url(“tablet.css”) only screen and (min-width:481px);

    /* desktop */
    @import url(“desktop.css”) only screen and (min-width:769px);

    /* phone-portrait */
    @import url(“phone-portrait.css”) only screen and (max-width:320px);
    /*high-res*/

    /* hi-res */
    @import url(“hi-res.css”) only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (-moz-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2);

    /*


    iPad Only landscape


    */
    @import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape);
    /*


    iPad landscape Retina Device Only


    */
    @import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 2)and (min-device-pixel-ratio : 2) and (max–moz-device-pixel-ratio: 2) ;
    /*


    iPad landscape Non Retina Device Only


    */
    @import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 1)and (min-device-pixel-ratio : 1) and (max–moz-device-pixel-ratio: 1) ;

    @import url(‘tablet-landscape.css’) screen and (orientation:landscape) and (min-width: 1024px);

    the test site can be seen at http://www.johnbehring.tv

    thanks for your help. peace!

    # May 11, 2013 at 4:30 pm

    i mean when i play it johnbehring.tv the iPad landscape mode should have a red box underneath the invalid license box. on the desktop mode that same box should be clear. what i have now is the red box showing up on both the landscape and desktop modes. your help would be greatly appreciated if you have any idea on how i can fix this discrepancy.

    # May 11, 2013 at 5:21 pm

    fixed it. secret is that you need to resize the desktop 1 pixel larger(1025) then the min iPad (1024) than place each query in the correct order. correct code attached below:

    /* phone-landscape */
    @import url(“phone-landscape.css”) only screen and (min-width:321px) and (max-width:480px);

    /* tablet – portrait */
    @import url(“tablet.css”) only screen and (min-width:481px);

    /*


    iPad Only landscape


    */
    @import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape);
    /*


    iPad landscape Retina Device Only


    */
    @import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 2)and (min-device-pixel-ratio : 2) and (max–moz-device-pixel-ratio: 2) ;
    /*


    iPad landscape Non Retina Device Only


    */
    @import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 1)and (min-device-pixel-ratio : 1) and (max–moz-device-pixel-ratio: 1) ;

    @import url(‘tablet-landscape.css’) screen and (orientation:landscape) and (min-width: 1024px);

    /* desktop */
    @import url(“desktop.css”) only screen and (min-width:1025px);

    /* phone-portrait */
    @import url(“phone-portrait.css”) only screen and (max-width:320px);

    /* hi-res */
    @import url(“hi-res.css”) only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (-moz-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2);

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

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