Linearizing the Layout

Contact Us or call 1-877-932-8228
Linearizing the Layout

Linearizing the Layout

As the browser narrows, it might make sense to slide the right sidebar under the left main column - a common strategy for shrinking a two-column design into the more narrow confines of a smartphone. As the screenshot below shows, the columns get pretty slim when the browser is narrowed too much, to the point where just a few words show on each line of the right sidebar:

Jazz Calendar screenshot - columns shrink too narrow

Let's add a few more media queries to handle browser widths of less than 520px - an arbitrary breakpoint, chosen here because it seems to make sense in the context of our page.

The page MediaQueries/Demos/linearize.html now behaves in the same manner as the previous example (graphic border and two-across gig listings disappear at browser-window widths less than 768px), but now the sidebar stops floating right (and thus slides under the main content) at widths less than 520px. Open the page in a browser and change the browser's width to check it out. Be sure to examine the media queries in MediaQueries/Demos/css/linearize.css - specifically the media queries that govern the #maincontent and #sidebar elements at widths less than 520 pixels:

@media screen and (max-width: 520px) {
	#main #maincontent {
		float:none;
		width:92%;
	}
}

@media screen and (max-width: 520px) {
	#main #sidebar {
		width:92%;
		float:none;
	}
}
Next