Responsive Design

Contact Us or call 1-877-932-8228
Responsive Design

Responsive Design

Media queries really come in handy when we are styling our pages to present content appropriately for different devices. By targeting the browser width, we can style content to look appropriate for a really wide desktop browser, a medium-sized tablet browser, or a really-small phone browser.

To view our next example, open up ClassFiles/CSS101MediaQueries/Demos/twobreakpoints.html in a browser.

Code Sample:

CSS101MediaQueries/Demos/twobreakpoints.html
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Media Queries Example</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #ccc;
		}
		#main {
			background-color: #fff;
			width: 80%;
			margin: 0 auto;
			padding: 2em;
		}
		article {
			float: right;
			width: 64.6666666%;
			padding: 1%;
			background-color: #ffaaaa;
		}
		aside {
			float: left;
			width: 31.3333333%;
			padding: 1%;
			background-color: #ffaaff;
		}
		footer {
			clear: both;
		}
		@media screen and (max-width: 700px) {
			article {
				float: none;
				width: 98%;
				padding: 1%;
				background-color: #ffaaaa;
			}
			aside {
				float: none;
				width: 98%;
				padding: 1%;
				background-color: #ffaaff;
			}
			footer {
				display: none;
			}
		}
	</style>
</head>
<body>
	<div id="main">
		<header>
			<h1>Media Queries</h1>
		</header>
		<article>
			<h2>Main Content</h2>
			<p>This is main content - it shows on right on desktops, on bottom on phones</p>
			<p>This is main content - it shows on right on desktops, on bottom on phones</p>
			<p>This is main content - it shows on right on desktops, on bottom on phones</p>
			<p>This is main content - it shows on right on desktops, on bottom on phones</p>
			<p>This is main content - it shows on right on desktops, on bottom on phones</p>
		</article>
		<aside>
			<h2>Sidebar Content</h2>
			<p>This is sidebar content - it shows on left on desktops, on bottom on phones</p>
			<p>This is sidebar content - it shows on left on desktops, on bottom on phones</p>
			<p>This is sidebar content - it shows on left on desktops, on bottom on phones</p>
		</aside>
		<footer>
			<p>This is the footer - it shows only on desktops</p>
		</footer>
	</div>
</body>
</html>

Code Explanation

The markup for our page comprises four structural elements:

  • A header, which displays an h1 title.
  • An article, which displays the main content for the page.
  • An aside, which displays the sidebar content for the page.
  • A footer, which (for desktop visitors) displays at the bottom of the page.

We use CSS to style the page by default, before our media query. We give some background color to the body, the container (#main) element, and the various structural elements. We float the article and aside so that the main content sits right in a large column and the sidebar content sits left in a smaller column.

Here is a screenshot of the page when viewed at a browser width of about 1200 pixels:

wide

Farther down among our CSS code you see the media query: here, we target a maximum width of 700 pixels. For any browser (desktop or mobile device) with a viewing pane of less than 700 pixels, we change things up:

  • We unfloat the article element and give it a width of 100% (98% plus 1% of right and left padding).
  • Similarly, we unfloat the aside element and give it a width of 100%. This has the effect of stacking the main content and sidebar content when viewed from a smaller (i.e. less than 700-pixels-wide) viewing pane.
  • Lastly, we hide the footer for smaller screens.

Here is a screenshot of the page when viewed at a browser width of about 500 pixels, with the media-query CSS applied:

wide

Note that we also use the viewport meta tag to scale the page when viewed on a mobile device. If possible, try viewing the page on a mobile device with the viewport meta tag in place, and then after removing the viewport tag to see the difference.

Let's have you try out some of the concepts we've presented so far with a brief exercise:

Next