Responsive Design with Multiple Breakpoints

Contact Us or call 1-877-932-8228
Responsive Design with Multiple Breakpoints

Responsive Design with Multiple Breakpoints

We can use media queries to target more than one feature, or more than one value of a given feature. Responsive frameworks (like Bootstrap, for instance, the popular HTML/CSS/JavaScript "mobile first" framework) often render sites with three or four different width breakpoints: a view for very wide desktop screens, a view for less-wide desktop screens, a tablet view, and a phone view. The next example extends the previous example to demonstrate this concept; open ClassFiles/CSS101MediaQueries/Demos/threebreakpoints.html in a browser to view the page.

<!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;
		}
		section {
			float: right;
			width: 68%;
			padding: 1%;
			background-color: #ffaaaa;
		}
		article {
			float: left;
			width: 71%;
			padding: 0 2%;
		}
		aside#calltoaction {
			float: right;
			width: 23%;
			padding: 1%;
			background-color: #ffffaa;
		}
		aside#sidebar {
			float: left;
			width: 28%;
			padding: 1%;
			background-color: #ffaaff;
		}
		footer {
			padding: 20px 0;
			clear: both;
		}
		@media screen and (max-width: 960px) {
			article {
				float: none;
				width: 98%;
				padding: 1%;
			}
			aside#calltoaction {
				float: none;
				width: 98%;
				padding: 1%;
			}
		}
		@media screen and (max-width: 600px) {
			section {
				float: none;
				width: 98%;
				padding: 1%;
				background-color: #ffaaaa;
			}
			aside#calltoaction {
				float: none;
				width: 98%;
				padding: 1%;
				background-color: #ffffaa;
			}
			aside#sidebar {
				float: none;
				width: 98%;
				padding: 1%;
				background-color: #ffaaff;
			}
			footer {
				display: none;
			}
		}
	</style>
</head>
<body>
	<div id="main">
		<header>
			<h1>Media Queries</h1>
		</header>
		<section>
			<article>
				<h2>Main Content</h2>
				<p>This is main content - it shows on right on desktops, on bottom on phones
				This is main content - it shows on right on desktops, on bottom on phones
				This is main content - it shows on right on desktops, on bottom on phones
				This is main content - it shows on right on desktops, on bottom on phones
				This is main content - it shows on right on desktops, on bottom on phones</p>
			</article>
			<aside id="calltoaction">
				<h2>Contact Us</h2>
				<p>Email and phone to go here</p>
			</aside>
		</section>
		<aside id="sidebar">
			<h2>Sidebar Content</h2>
			<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>

We've added two new structural elements to our page since the first example: a new aside (with id calltoaction, the idea here being that we display a contact email and phone) and a section which wraps the article (main content) and the new aside element.

We added a new media query so that we now target three different viewing-pane widths:

  • By default, our "regular" CSS code works for any browser greater than 960 pixels.
  • A new media query targets browsers with a maximum width of 960 pixels. Since there is another media query farther down in our code, this media query will apply for browser widths between 600 pixels and 960 pixels.
  • Our "small screen" media query we changed to work for widths of less than 600 pixels.

For large screens (wider than 960 pixels), we display a three-column layout: the sidebar content sits at left, the main content sits at right (in a wider column), and the call-to-action content floats to the right of the main content. Here's how the page looks:

wide

For medium screens (wider than 600 pixels but narrower than 960 pixels), we display a two-column layout: "sidebar" sits left and "main" sits right, but "call to action" falls below the main content; this happens because we "un-floated" the #calltoaction element in the middle (@media screen and (max-width: 960px) media query. Here's a screenshot of the medium-sized layout:

medium

For small screens (a maximum width of 600 pixels), we display the content stacked: the main content is at top, call-to-action content below it, and sidebar content at bottom. As in the earlier example, we hide (display: none) the footer for smaller screens. And here's the small-layout version of the page:

small

As you can imagine, the presentation of our sites can get arbitrarily complex. You might target media features other than width - aspect ratio, for example, presenting content differently for a phone rotated 90 degrees on its side. Or you might target a wider range of width breakpoints, styling your pages to present different page layouts for four, five, or more different width ranges.

Image Widths

As you have seen, our responsive-design work with media queries often relies on percentage-based widths. As such, images can present a problem: as a screen narrows, an image - which has its own inherent width - can "break" our designs, poking out of its container div (or other) element. A handy solution to this problem is the CSS rule max-width: 100%. Here's a quick example:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Max Width</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		div#main {
			width: 70%;
			margin: 0 auto;
		}
		div#item {
			padding: 5%;
			margin: 0 auto;
			width: 50%;
			background-color: #f00;
		}
		img {
			max-width: 100%;
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="item">
			<img src="building.jpg" alt="building" />
		</div>
	</div>
</body>
</html>

Our simple page contains a div with red background, which in turn contains an image. The image's size makes it too wide to fit into the red div; without the max-width: 100% CSS rule, the page would look like this:

bad

When we include the max-width: 100% rule, the image now scales to not exceed the width of its parent container element:

good

In the next exercise, you'll add another (a third) view to the blog on which you worked earlier, so that the blog displays differently for large, medium-sized, and small screens, and also implement the max-width: 100% rule.

Next