Media Queries bypassed to Desktop

CSS, Media Queries, break points, bypassed

[EastTexas]

I'm using a hybrid of Gridless CSS & Less Framework 4 lessframework.com

The problem is @media only screen and (min-width:600px) and (max-width:1024px) is being bypassed and going straight to the desktop. Do you see the problem? I don't.


/* DEFAULT WRAPPER - Gridless CSS
* The body will work like a 'div#wrapper' (for this to work, the 'body' needs to have a set width)

* To add a background to the PAGE, set it in the 'html' element
* To add a background to the WRAPPER, set it in the 'body' element
*/
html {
height:100%;
overflow-y:scroll; /* Force a scrollbar in non-IE */
-webkit-text-size-adjust:100%; /* Prevent iOS text size adjust on orientation change without disabling user zoom */
-ms-text-size-adjust:100%;
font:100%/1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
background:#333;
}

body {
margin:0 auto;
padding:0 0 0 0;
width:100%;
max-width:100%;/*1024px;*/
min-height:100%;
overflow-x:hidden;
/*background:#FFF;*/
background:url('../images/img.png')
no-repeat left 47px #FFF; /* #2B73CA; #D3C9B4; IE IMG FIX */
background-size:auto 17%; overflow:hidden;}
}
/* END Gridless CSS */



@media only screen and (min-width:600px) and (max-width:1024px) {

html {overflow-x:hidden; overflow-y:scroll;}
html, body {padding:0.5%; background-image:none;}

header[role="banner"] {clear:both; height:auto; background:rgba(255,255,255,0.7) !important;}
header[role="banner"] #logo {font-size:152%;}

nav[role="navigation"] {clear:both; float:none; cursor:pointer;}

article[role="main"] {width:95%;}

.group {margin-left:0; max-width:none;}
.col {width:auto; margin-left:0; display:block;}
}




@media only screen and (max-width:540px) {

html {overflow-x:hidden; overflow-y:scroll;}
html, body {padding:0.5%; background-image:none;}

header[role="banner"] {clear:both; float:none; margin:0 auto; height:auto; text-align:center !important;}
header[role="banner"] .hgroup {clear:both; margin:5% auto 1% auto; text-align:center !important;}
header[role="banner"] #logo {font-size:120.5%;}

nav[role="navigation"] {clear:both; float:none; margin:-7% auto 1% 1%; text-align:center !important;}

nav[role="navigation"], header[role="banner"] .hgroup {clear:both; float:none; cursor:pointer;}
nav[role="navigation"] ul ul {margin:0 0 0 -42px;}

article[role="main"] {margin:0 auto; padding:1%;}
.group {margin-left:0; max-width:none;}
.col {width:auto; margin-left:0; display:block;}
.w, .w100, .w75, .w60, .w50, .w45, .w35, .w25, .w20, .w15, .w10 {width:100%; margin:7% auto 7% auto;}

section {clear:both; float:none; width:100%; margin:7% auto 7% auto;}

aside {display:none;}

.img-50, .img-75 {height:auto; max-width:85%; width:85%;}

figure, figure.smallbox, figure.mediumbox {min-width:215px; max-width:475px;}
figure figcaption {display:block; clear:both; left:1%; right:1%;}

figure.promo img {width:200px; height:auto;}

form fieldset, form input, form textarea {width:85%; overflow:hidden;}
}



@viewport {
zoom: 1.0;
width: device-width;}
}

[not2easy]

Without checking the whole thing, one thing stands out right away:

(for this to work, the 'body' needs to have a set width)

You have 2 width settings for the body, but neither is a set width. In the css the body width is 100% of the screen width.

[EastTexas]

Desktop width:100%;
mobile width not set; does that make a difference?

TIP: With Gridless CSS, I have eliminated most wrappers 8)
I find most css frameworks too bloated; that's why I gravitate towards the smaller frameworks.

[lucy24]

:: tangential ::

@media only screen and (min-width:600px) and (max-width:1024px)

This seems way too tightly constrained. Why do you need all three elements ("only", min-width, max-width)? See what happens if you get rid of the word "only" and also the "min-width" element.

[EastTexas]

Did not work...

It just does not like the @media only screen and (min-width:600px) and (max-width:1024px) for some odd reason & only uses @media only screen and (max-width:540px) & desktop.

NOTE: max-width:540px needed below to remove the background did NOT work w/ (min-width:600px) and (max-width:1024px)
html {overflow-x:hidden; overflow-y:scroll;}
html, body {padding:0.5%; background-image:none;}

Could it be because I working from Large to Small & not Small to Large? The fist makes more since due to Modern IE & compatibility mode nightmares...

[EastTexas]

FOUND IT!

It was a stray } on the body tag!

Thanks everyone for the advice!

[not2easy]

Very happy that you got that taken care of. Just a note - there are stray } in several places in the css, not just that one. Did you know that if you validate the css it will show you any errors in the file? Sometime just a minute or two here: [jigsaw.w3.org...] can save you hours of aggravation.

[lucy24]

Reminder: html and css are both intended to be forgiving. A single php mistake (mismatched brackets definitely qualify) can lead to a blank page; a single javascript mistake can mean that nothing in the file will execute. But a mistake in CSS means only, at worst, that the browser stops reading when it encounters the mistake, and just works with what it's got up to that point.

[EastTexas]

I have looked over the css, I only see one stray.
Where is the other little bugger hiding?

[not2easy]

There's one here:
@viewport {
zoom: 1.0;
width: device-width;}
}

A note on the topic of viewport settings when you use @media queries - be sure that you also have the viewport metatag in the headers or else most webkit based mobile browsers do not honor media queries. Without the meta tag they present themselves as desktops for @media screen settings.

[EastTexas]

Good catch; I was already using it...

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

Nothing better than cut-n-paste leftovers 8(