Development Blog

July 08, 2013
One CSS grid system that works with four layouts; desktop, mobile, tablet, and mobile wide.

CSS

Based on Less Framework impressive CSS grid system, I made a template file for my future use. See demo and then resize the browser window for the effect.

896px: Default, desktop width size
768px: Tablet
320px: Mobile, vertical view
480px: Mobile wide, horizontal view

Here's a peice of the CSS coding:

RAW

/* build out your CSS here just like you normally would */

#header	{
	background-image:url('banner.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	height: 200px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

/* now redefine the HEADER attribute based on the new screen sizes below */
@media only screen and (min-width: 768px) and (max-width: 991px) {
#header {
	height: 170px;
	}
}

@media only screen and (max-width: 767px) {
#header	{
	height: 74px;
	}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
#header	{
	height: 104px;
	}
}

RESULT
See demo and then resize the browser window for the effect. Please note that most browser window can not squeeze as tight to match the iPhone vertical display screen so be sure to proof your work with a smartphone.