Media Queries ?

[donboe]

Hi all,

I am playing a bit arround with media queries. In a test page I have the following CSS:

@charset "utf-8";
/* CSS Document */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}
	
ol, ul {
    list-style: none;
}
	
blockquote, q {
    quotes: none;
}
    
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
    }
    
table {
    border-collapse: collapse;
    border-spacing: 0;
    }
	
html, body {
	width: 100%;
	height: 100%;
}	

/********************
								HTML
											********************/
body:before {
	content:'';
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}											
											
body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1;
	font-size: 100%;
	background: #0000;
	color: #000;
}

#bg {
	position:fixed; 
	top:-35%; 
	left:-50%; 
	width:200%; 
	height:200%;
	z-index: -999;
}
#bg img {
	max-width: 100%;
	position:absolute; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	margin:auto; 
	min-width:50%;
	min-height:50%;
}

@media only screen 
and (min-device-width : 1025px){
	
/********************
							CONTAINERS
											********************/
	
#wrapper {
	width: 100%;
	max-width: 1060px;
	height: 100%;
	min-height: 100%;
	margin: -42px 0 0;
	position: relative;	
	overflow: hidden;
}

#wrapper:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#footer_panel {
	width: 100%;
	max-width: 1060px;
	height: 42px;
	position: relative;
	clear: both;
	z-index: 200px;
	font-size: .875em;	
}

/********************
								HEADER
											********************/
#header {
	width: 98.11320754716981%;
	max-width: 1040px;
	position: absolute;
	top: 0;
	left: 20px;
	overflow: hidden;
	border-top: 42px solid #FFF;
	z-index: 100;
	clear: both;
}

#header #logo {
	width: 260px;
	margin: 20px 0 0 0;
	float: left;	
}

#header #logo a {
	width: 260px;
	height: 58px;
	display: block;
	margin: 0;
	text-indent: -9999em;
	text-transform: uppercase;
	background: url(../images/site/logo_1040.png) 0 0 no-repeat;	
}

#header #languages {
	margin-top: 20px;
	display: inline-block;
	float: right;	
}

#header #languages li {
	float: left;	
}

#header #languages li + li {
	margin-left: 5px;	
}

#header #languages li a {
	text-decoration: none;
	color: #FFF;
	font-weight: bold;	
}

/********************
								CONTENT
											********************/

#main {
	width: 100%;
	max-width: 1060px;
	min-height: 1px;
	margin: 20px 0 0 0;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	z-index: 4;
	overflow: hidden;
}

#sidebar {
	width: 25%;
	max-width: 260px;
	padding: 40px 0;
	position: relative;
	float: left;
	z-index: 1;
	vertical-align: top;
}

.sidebar {
	width: 25%;
	max-width: 258px;
	height: 100%;
	position: absolute;	
	top: 0;
	bottom: 0;
	left: 20px;
	z-index: 0;
	border-right: solid 2px #F6491F; 
	background: #FFF;
	zoom: 1; 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;	
}

#mask {
	width: 75%;
	max-width: 780px;
	position: absolute;
	overflow: hidden;
	top: 0;
	bottom: 0;
	left: 280px;
}

#content {
	width: 100%;
	max-width: 780px;
	padding: 40px 0; 
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: none;
	z-index: 1;
	overflow: hidden;
	background: #FFF;
	zoom: 1; 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;	
}

#menu {
	width: 90.38461538461538%;
	max-width: 235px;
	margin: 0 0 0 25px;
	overflow: hidden;
}

#menu li {
	width: 100%;
	line-height: 30px;
}

#menu a {
	color: #333;
	text-decoration: none;
	display: block;
	font-size: 1.1em;
	text-indent: 20px;
}

#menu a:hover {
	color: #F6491F;
}

#menu a:active {
	background-position: 0 -540px;	
}

#content h1 {
	padding: 0 40px 20px;
	font-size: 1.5em;	
}

#content p {
	margin: 0 40px;
	font-size: 1em;
	text-align: justify;
}

#content p + p {
	margin: 15px 40px 0;
}

#footer_panel #footer {
	width: 98.11320754716981%;
	max-width: 1040px;
	height: 42px;
	line-height: 42px;
	margin-left: 20px;
	background: #000;
	color: #FFF;
	zoom: 1; 
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  	filter: alpha(opacity=80);
  	-moz-opacity: 0.8;
  	-khtml-opacity: 0.8;
  	opacity: 0.8;
	position: relative;
	z-index: 100;
	overflow: hidden;
}

#footer_panel #footer p {
	margin-left: 30px;
}

}

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
/********************
						CONTAINERS
									********************/	
	
#wrapper {
	width: 100%;
	max-width: 600px;
	height: 100%;
	min-height: 100%;
	margin: -20px 0 0;
	position: relative;	
	overflow: hidden;
}

#wrapper:before {
  	content: '';
  	display: inline-block;
  	height: 100%;
  	vertical-align: middle;
}

#footer_panel {
	width: 100%;
	max-width: 600px;
	height: 20px;
	position: relative;
	clear: both;
	z-index: 200px;
	font-size: .875em;	
}

#header {
	width: 98%;
	max-width: 588px;
	position: absolute;
	top: 0;
	left: 2%;
	overflow: hidden;
	border-top: 20px solid #FFF;
	z-index: 100;
	clear: both;
}

#header #logo {
	width: 147px;
	margin: 10px 0 0 0;
	float: left;	
}

#header #logo a {
	width: 147px;
	height: 33px;
	display: block;
	margin: 0;
	text-indent: -9999em;
	text-transform: uppercase;
	background: url(../images/site/logo_600.png) 0 0 no-repeat;	
}

#main {
	width: 98%;
	max-width: 588px;
	min-height: 1px;
	margin: 10px 0 0 0;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	z-index: 4;
	overflow: hidden;
}

#sidebar {
	width: 25%;
	max-width: 147px;
	padding: 40px 0;
	position: relative;
	float: left;
	z-index: 1;
	vertical-align: top;
}

.sidebar {
	width: 25%;
	max-width: 145px;
	height: 100%;
	position: absolute;	
	top: 0;
	bottom: 0;
	left: 20px;
	z-index: 0;
	border-right: solid 2px #F6491F; 
	background: #FFF;
	zoom: 1; 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;	
}

#menu {
	width: 90.38461538461538%;
	max-width: 133px;
	margin: 0 0 0 14px;
	overflow: hidden;
}

#menu li {
	width: 100%;
	line-height: 30px;
}

#menu a {
	color: #333;
	text-decoration: none;
	display: block;
	font-size: 1.6em;
	text-indent: 20px;
}

#menu a:hover {
	color: #F6491F;
}

#menu a:active {
	background-position: 0 -540px;	
}

#mask {
	width: 75%;
	max-width: 441px;
	position: absolute;
	overflow: hidden;
	top: 0;
	bottom: 0;
	left: 147px;
}

#content {
	width: 75%;
	max-width: 441px;
	padding: 40px 0; 
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: none;
	z-index: 1;
	overflow: hidden;
	background: #FFF;
	zoom: 1; 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;	
}

#content h1 {
	padding: 0 20px 10px;
	font-size: 2em;	
}

#content p {
	margin: 0 20px;
	font-size: 1.6;
	text-align: justify;
}

#content p + p {
	margin: 15px 20px 0;
}

#footer_panel #footer {
	width: 98%;
	max-width: 588px;
	height: 20px;
	line-height: 20px;
	margin-left: 2%;
	background: #000;
	color: #FFF;
	zoom: 1; 
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  	filter: alpha(opacity=80);
  	-moz-opacity: 0.8;
  	-khtml-opacity: 0.8;
  	opacity: 0.8;
	position: relative;
	z-index: 100;
	overflow: hidden;
}

#footer_panel #footer p {
	margin-left: 15px;
}

}

and I added the metatag <meta name="viewport" width="device-width" /> to the page.

When I tested the page on my laptop everything is like declared in the first media query:

@media only screen 
and (min-device-width : 1025px){

}

But testing it on the IPAD gives me just a black screen. What is wrong? Is it the order in which the media queries are placed the stylesheet or is it something completely different?

[Paul O'B]

Hi,

You don't have any rules for the ipad in portrait mode as far as I can see. All you have is the default declarations and then rules for devices of 1025px which misses the ipad unless its in landscape mode (and I believe it should be 1024px not 1025px anyway).

See here for a list of suitable media queries.

It seems that the ipad is reading the malformed rule from your body style:

body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1;
	font-size: 100%;
	background: #0000;
	color: #000;
}

#0000 is not valid and should be #000 or #000000.

However, I think you are approaching this wrong and I find it better to target the width of the viewport rather than the device because you never know when a new device will appear (as in the ipad itself and now the ipad mini). Media queries are better targeted at breakpoints within your own layout where things need to change to accommodate the different characteristics of your design.

If you create a design that can scale nicely from 240 up to 1200px the you cater for devices and when the ipad maxi comes out (there's no such thing) you will be ready. Don't cater for devices as there are too many and you will never keep track but tailor the media queries to the breakpoints in your own layout. You can soon find that out by opening and closing the window until something breaks and then use a media query to change the design to suit.

e.g.You may find that floated percentage columns are fine until they hit 890px so you set something like this:

/* expand columns at smaller screen widths and remove floats */
@media only screen and (max-width: 890px)  {
rules go here 
}

Lastly remember that the rules in the media queries should be over-rides that build on what you have and not separate blocks of code as that is too bulky.

[donboe]

Hi Paul. Thank you very much for your reply. Very helpful.

I am only not sure what you mean with:

Lastly remember that the rules in the media queries should be over-rides that build on what you have and not separate blocks of code as that is too bulky.

Are there any good tutorials where I can build upon?

[Paul O'B]

Hi Paul. Thank you very much for your reply. Very helpful.

I am only not sure what you mean with:

I simply meant that you should not duplicate rules that already exist. Your base stylesheet should carry all the structure that you need and then you just enhance it for more capable devices with media queries.

It looked from the small snippet of code that you posted that you were putting all the rules in each media query rather than over-rides. If you start with a base css.

e.g.
#wrapper{width:960px; margin:auto; other rules etc.....}

Then you would modify it for smaller devices.

e.g.
#wrapper{width:100%} /*if its a fluid site*/

or perhaps

#wrapper{ width 320px} /* if its a fixed design and tageting the iphone */


Only include the rules that modify the original. Don't include all the original code.

As I said above I quite like this approach:
http://seesparkbox.com/foundry/there_is_no_breakpoint

[donboe]

Hi Paul. thank you for that advvise. Would you mind to have a look at the stylesheet now and tell me if I have understood you the right way? I am still working onit ofcourse. Here is the CSS:

@charset "utf-8";
/* CSS Document */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}
	
ol, ul {
    list-style: none;
}
	
blockquote, q {
    quotes: none;
}
    
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
    }
    
table {
    border-collapse: collapse;
    border-spacing: 0;
    }
	
html, body {
	width: 100%;
	height: 100%;
}	

/********************
								HTML
											********************/
body:before {
	content:'';
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}											
											
body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1;
	font-size: 100%;
	background: #000;
	color: #000;
}

#bg {
	position:fixed; 
	top:-50%; 
	left:-50%; 
	width:200%; 
	height:200%;
	z-index: -999;
}
#bg img {
	max-width: 100%;
	position:absolute; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	margin:auto; 
	min-width:50%;
	min-height:50%;
}

/********************
							WRAPPER
											********************/
	
#wrapper {
	width: 70%;
	max-width: 1000px;
	height: 100%;
	min-height: 100%;
	margin: -40px 0 0 2%;
	position: relative;	
	overflow: hidden;
	font-size: 81.25%
}

#wrapper:before {
  	content: '';
  	display: inline-block;
  	height: 100%;
  	vertical-align: middle;
}


/********************
								HEADER
											********************/
#header {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	border-top: 40px solid #FFF;
	z-index: 2;
	clear: both;
}

#header #logo {
	width: 25%;
	height: auto;
	margin: 20px 0 0 0;
	float: left;	
}

#header #logo a {
	width: 250px;
	display: block;
	margin: 0;
	overflow: hidden;
}

#header #logo img {
	max-width: 100%;	
}

#header #languages {
	margin-top: 2%;
	display: inline-block;
	float: right;	
}

#header #languages li {
	float: left;	
}

#header #languages li + li {
	margin-left: 8px;	
}

#header #languages li a {
	text-decoration: none;
	color: #FFF;
	font-weight: bold;	
}

/********************
								CONTENT
											********************/

#main {
	width: 100%;
	min-height: 1px;
	margin: 2% 0 0 0;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	z-index: 4;
	overflow: hidden;
}

#sidebar {
	width: 25%;
	padding: 40px 0;
	position: relative;
	float: left;
	z-index: 1;
	vertical-align: top;
}

.sidebar {
	width: 24%;
	height: 100%;
	position: absolute;	
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background: #FFF;
	zoom: 1; 
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  	filter: alpha(opacity=70);
  	-moz-opacity: 0.7;
  	-khtml-opacity: 0.7;
  	opacity: 0.7;	
}

.sidebar_border {
	width: 1%;
	height: 100%;
	position: absolute;	
	top: 0;
	bottom: 0;
	left: 24%;
	z-index: 0;
	background: #F6491F;		
}

#mask {
	width: 75%;
	position: absolute;
	overflow: hidden;
	top: 0;
	bottom: 0;
	left: 25%;
}

#content {
	width: 100%;
	padding: 40px 0; 
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: none;
	z-index: 1;
	overflow: hidden;
	background: #FFF;
	zoom: 1; 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;	
}

#menu {
	width: 90%;

	margin: 0 0 0 25px;
	overflow: hidden;
}

#menu li {
	width: 100%;
	line-height: 30px;
}

#menu a {
	color: #333;
	text-decoration: none;
	display: block;
	font-size: 1.1em;
	text-indent: 20px;
}

#menu a:hover {
	color: #F6491F;
}

#content h1 {
	padding: 0 4% 20px;
	font-size: 1.5em;	
}

#content p {
	margin: 0 4%;
	font-size: 1em;
}

#content p + p {
	margin: 15px 4% 0;
}

#footer {
	width: 70%;
	max-width: 1000px;
	height: 40px;
	line-height: 40px;
	margin-left: 2%;
	position: relative;
	z-index: 2;
	background: #000;
	color: #FFF;
	zoom: 1; 
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  	filter: alpha(opacity=80);
  	-moz-opacity: 0.8;
  	-khtml-opacity: 0.8;
  	opacity: 0.8;
	font-size: 75%;	
}


#footer_panel #footer p {
	margin-left: 30px;
}

@media only screen and (max-width: 768px)  {
	#wrapper,
	#footer {
	width: 98%;
	margin: 0 auto; 
	font-size: 65%;	
	}
	
	#footer {
	font-size: 60%;	
	}	
	
	#header {
	border-width: 0;
	}

	#header #logo {
	margin: 10px 0 0 0;
}	
	
	#sidebar {
	width: 35%;
	}
	
	#menu {
	margin: 0 0 0 5px;
	font-size: .85em;	
	}
	
	.sidebar {
	width: 34%;
	}

	.sidebar_border {
	left: 34%;
	
	}
	
	#mask {
	width: 65%;
	left: 35%;
	}

	#content {
	padding-bottom: 20px;
	overflow: auto;
	}
	
	#content h1 {
	font-size: 1.3em;	
	}

	#content p {
	font-size: 1.1em;
	}
	
	#footer_panel #footer p {
	margin-left: 10px;
}		
	
}

[Paul O'B]

Yes, that looks ok as you are only adding over-rides into the media query rather than whole blocks of code (unless of course you do need to change things substantially).

Be careful with things like:

height: 100%;
min-height: 100%;

What happens in the above code is that all you get is height:100% so the min-height:100% is redundant. That means the element is a fixed height and can never grow. This may be ok if you expect it never to reach outside the viewport but that seems unlikely. Usually you would just want min-height:100% unless you need inner elements to base your height on but then you are fixing the height for all elements. You can get away with it if you have a fixed height layout but you have to be careful.

[donboe]

Thank you for taking the time to look into it. I am aware of the height/min-height issue. I used that because of the way I have vertically centered the main content with the wrapper:before method, as we digussed in another post already. I will probably go for the table/table-cell approach as in your example. One last thing though. It has to do with the border used to get the stick footer. You can't use percentages in the border properties. Looking at the css in your example/ versus my CSS, how would you handle that.

[Paul O'B]

One last thing though. It has to do with the border used to get the stick footer. You can't use percentages in the border properties. Looking at the css in your example/ versus my CSS, how would you handle that.

Where am I looking exactly? I don't see a percentage border in your example (unless I missed it).

(Regarding sticky footers then I have now changed to using my auto height version (IE8+) which means the footer can be auto height and fluid.)

[donboe]

I didn't use it because when I tried everything was messed up. Another quetion is, In your example table/table-cell you use border-bottom and border-top for header and footer. But as you have seen do I use a full image background, so I can't use a color on those borders. Can I use transparant for that?

[Paul O'B]

I didn't use it because when I tried everything was messed up. Another quetion is, In your example table/table-cell you use border-bottom and border-top for header and footer. But as you have seen do I use a full image background, so I can't use a color on those borders. Can I use transparant for that?

You can use a transparent border (border:2px solid transparent) but you will need to add any header and footer backgrounds to an inner element instead.