Grow your CSS skills. Land your dream job.

Help with Mobile CSS

  • # March 31, 2013 at 5:47 pm

    I should learn to come to CSS-Tricks.com BEFORE I spend hours banging my head against my desk while trying to solve a problem.

    http://worldcannabisweek.com

    There’s a LOT wrong with this site on the back-end. It’s a nightmare. However, these guys hired me to make just 3 simple changes, the last of which was to fix the fact that their logo overlaps their telephone number (in the header) when viewed on some mobile devices.

    I have, I’m reasonably sure, corrected this issue on iPhones with the code below:

    @media only screen and (max-device-width: 480px) {
    /* Put your iPhone 3G styles in here */
    #logo {position: absolute; left: 0; top: 30px;}
    #contact {margin: 0; padding-top: 90px; float: left;}
    }

    @media only screen and (device-width: 768px) {
    /* Put CSS for general iPad layouts in here */
    #logo {position: absolute; left: 0; top: 0;}
    #contact {margin: 0; padding-top: 90px; float: left;}

    }

    However fixes for Android and Windows Mobile elude me.

    Isn’t there something that says:

    If the screen width is less than X apply this styling? I know nothing about Mobile CSS so any help would be appreciated.

    Thanks,
    Tanner

    # March 31, 2013 at 6:06 pm

    You’re already doing exactly that with those media queries, ‘if the screen width is less than 480px apply this styling’ and ‘if the screen is exactly 768px apply that style’ (the comments might say iPhone 3G but it works for [a lot more mobile devices](http://caniuse.com/#feat=css-mediaqueries) than just that one).

    However you’re better off with media queries like:

    @media screen and (max-width: 480px)

    Which will respond to actual window width instead of screen width, and put the largest one first (so `max-width: 768px` first and then `max-width: 480px`, else you’ll have styles for 481px to 768px overwriting styles for <= 480px).

    # March 31, 2013 at 6:09 pm

    But this code is put together differently for Android browsers … isn’t it? Something more like this:

    @media only screen and (-webkit-device-pixel-ratio:.75){}

    Or am I off my rocker?

    # March 31, 2013 at 6:15 pm

    Android uses webkit too so that will probably work, however you don’t need it.

    `max-width: 480px` works for retina screens as well because even though, for example, iPhone 4′s physical resolution is 960px, it’s still considered 480px (likewise with iPhone 5 but it’s larger than 480px so the MQ won’t target iPhone 5, and Samsung Galaxy SIII is 640px, physical 1280px)

    # March 31, 2013 at 6:34 pm

    Okay, fair enough. So now I have this:

    @media screen and (max-width: 960px) {
    /* Mobile style 960px or less */
    #logo {position: absolute; left: 0; top: 30px;}
    #contact {margin: 0; padding-top: 90px; float: left;}
    }

    @media only screen and (device-width: 768px) {
    /* Mobile style 768px specific */
    #logo {position: absolute; left: 0; top: 30px;}
    #contact {margin: 0; padding-top: 90px; float: left;}
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* Mobile style iPad portrait */
    #logo {position: absolute; left: 0; top: 30px;}
    #contact {margin: 0; padding-top: 90px; float: left;}
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* Mobile style iPad landscape */
    #logo {position: absolute; left: 0; top: 30px;}
    #contact {margin: 0; padding-top: 90px; float: left;}
    }

    I’m testing with ScreenFly: http://quirktools.com/screenfly/
    http://worldcannabisweek.com

    Could you tell me why it looks great for all the options on ScreenFly except the Tablet > iPad 1-3/Mini?

    # March 31, 2013 at 6:52 pm

    I’d put the breakpoint to make the contact go left the same as the breakpoint you use to collapse the menu. Having 4 MQs that do the same thing seems kinda redundant to me. I’d remove them, start your browser on full width and slowly narrow your browser window. When you need a breakpoint, make one. Repeat till you hit the lowest width you want to support (probably 320px or less).

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

You must be logged in to reply to this topic.

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