Quick Tip: Different Layouts for Different Widths


This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

It's becoming more and more common for web sites and applications to provide different layouts dependent upon the user's window size, or resolution. This can be accomplished in a variety of ways, ranging from CSS to JavaScript solutions.

In this video quick tip, we'll learn how laughably simple it is to do this with a touch of jQuery, and the resize() method.

By utilizing jQuery's "resize()" method, we can easily listen for when the user changes the width of their browser window.

function checkWindowSize() {
	if ( $(window).width() > 1800 ) {
	else {


Then, subsequently, we target our desired CSS properties accordingly.

#container {
	width: 800px;
	height: 1000px;
	background: #e3e3e3;
	margin: auto;

/* Change container size for larger windows. */
.large #container {
	width: 1000px;

#nav {
	width: 100%;
	height: 100px;
	border-bottom: 1px solid white;
	background: #999999;

.large #nav {
	float: left;
	width: 200px;
	border-bottom: none;
	border-right: 1px solid white;
	height: 1000px;