Help with Mobile CSS

[tannercampbell]

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

[CrocoDillon]

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).

[CrocoDillon]

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)

[CrocoDillon]

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).

[Author]

Posts