TheDoc - Yeah, I suppose I can do that. I was trying to avoid giving the desktop style sheet a media query which is what I would have to do if I'm using min-widths instead of max-widths.
If the media query isn't supposed to apply to desktop, then you can just use min-device-width and max-device-width. I'm not really sure what you're going for, though.
Hello,
I'm just about done with this website (http://tinyurl.com/8ps7joa), but I am facing two issues that are bugging me...
1) The media query set
"@media screen and (max-width: 320px)"
is being ignored ONLY on desktop browser, despite me not specifying device type.
2) When viewed ON MOBILE (max-width: 320px) the style
html, body { width:320px; }
is being ignored. If you scroll to the right there appears to be white space, where the 320px should of already ended.
Thanks!
What is it supposed to do below 320px on a desktop browser that it isn't?
Well mostly it would help me diagnose the 2) issue, plus I'm just curious why it won't take.
If you're testing on an iPhone it should be
min-width: 320px, notmax.TheDoc - Yeah, I suppose I can do that. I was trying to avoid giving the desktop style sheet a media query which is what I would have to do if I'm using min-widths instead of max-widths.
If the media query isn't supposed to apply to desktop, then you can just use
min-device-widthandmax-device-width. I'm not really sure what you're going for, though.This is how I have my document setup after my desktop styles...
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-width : 320px) and (max-width : 480px) {
/* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) and (max-width : 480px) {
/* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) {
Why the heck is ONLY my desktop browser ignoring the "portrait styles" in favor of "landscape styles" despite me scaling the window to 320 or below?
And secondly, why is my iPhone accepting all my portrait styles EXCEPT for html, body {width:320px;} ?
Except for throwing out the "device" parameter from Scott's boiler plate, everything else is the same. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*updated OP website