mediaqueries.css

/*
	Mediaqueries

	Help from http://webdesign.tutsplus.com
	http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-basic-responsive-grid-plus-handy-css3-media-query-reporter/
*/

/* Banner at very bottom created with pure CSS */
body:after {
	content: "less than 320px";
	font-size: 300%;
	font-weight: bold;
	position: fixed;
	bottom: 0px;
	width: 100%;
	text-align: center;
	background-color: hsla(1,60%,40%,0.7);
	color: #fff;
}

/*
	makes images no bigger than 100% of their width
	height auto ensures no ugly resizing
*/
img, video {
	max-width: 100%;
	height: auto;
}

/* -------------- SIZE 320 to 480 ----------------- */
@media only screen and (min-width: 320px) {
	body:after {
		content: "320 to 480px";
		background-color: hsla(90,60%,40%,0.7);
	}
	#wrapper {
		max-width: 480px;
	}
}

/* -------------- SIZE 480 to 768 ----------------- */
@media only screen and (min-width: 480px) {
	body:after {
		content: "480 to 768px";
		background-color: hsla(180,60%,40%,0.7);
	}
	
	#wrapper {
		max-width: 768px;
	}
}

/* -------------- SIZE 768 to 1024 ----------------- */
@media only screen and (min-width: 768px) {
	body:after {
		content: "768 to 1024px";
		background-color: hsla(270,60%,40%,0.7);
	}
	#wrapper {
		max-width: 1024px;
		padding:0 2%;
	}
}

/* -------------- SIZE 1024 AND UP ----------------- */
@media only screen and (min-width: 1024px) {
	body:after {
		content: "1024 to 1200px";
		background-color: hsla(360,60%,40%,0.7);
	}
	#wrapper {
		padding:0 1%;
	}
}

/* -------------- SIZE 1024 AND UP ----------------- */
@media only screen and (min-width: 1200px) {
	body:after {
		content: "1200px and up";
		background-color: hsla(360,60%,40%,0.7);
	}
}