Responsive Design for a Simple Blog - Exercise

Contact Us or call 1-877-932-8228
Responsive Design for a Simple Blog - Exercise

Responsive Design for a Simple Blog

Duration: 10 to 20 minutes.

In this exercise, you will use CSS3 media queries to render layouts for a blog homepage for both desktop and mobile views.

  1. Open ClassFiles/CSS101MediaQueries/Exercises/two-col.html in a browser and in a code editor.
  2. The HTML markup is provided for you, with the following elements:
    • A header to display the page title.
    • A section, which contains an h2 title ("Recent Articles") and a series of blog posts, each of which is wrapped in an article tag.
    • An aside, which presents the user with a subscribe-by-email form.
    • A footer.
  3. Write CSS code to render the page as shown for desktop views, at browser widths greater than 700 pixels (or whatever value you deem appropriate): wide
  4. Write CSS code - including, of course, a media query - to render the page as shown for browser widths less wide than the width threshold you choose: narrow

Solution:

CSS101MediaQueries/Solutions/two-col.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 {
			font-family: Helvetica, 'Helvetica Neue', sans-serif;
			background-color: #ccc;
		}
		#main {
			background-color: #fff;
			width: 80%;
			margin: 0 auto;
			padding: 2em;
		}
		h2 {
			margin: 0 0 10px 0;
		}
		section {
			float: right;
			width: 78%;
			padding: 0 1%;
		}
		article {
			float: left;
			width: 44%;
			padding: 2%;
			background-color: #ffff99;
			margin: 0 1% 1% 0;
		}
		article:nth-child(even) {
			clear: left;
		}
		aside {
			float: left;
			width: 18%;
			padding: 1%;
			background-color: #ddd;
		}
		footer {
			clear: both;
		}
		@media screen and (max-width: 700px) {
			section {
				float: none;
				width: 100%;
				padding: 0;
			}
			article {
				float: none;
				width: 96%;
				padding: 2%;
				background-color: #ffff99;
				margin: 1% 0;
			}
			aside {
				margin-top: 20px;
				float: none;
				width: 96%;
				padding: 2%;
				background-color: #ddd;
			}
		}
	</style>
</head>
<body>
	<div id="main">
		<header>
			<h1>My Blog</h1>
		</header>
		<section>
			<h2>Recent Articles</h2>
			<article>
				<h3>Headline 1</h3>
				<p>Ea delenit ut iaceo quidem. Duis transverbero blandit tation te minim commoveo t.</p>
			</article>
			<article>
				<h3>Headline 2</h3>
				<p>Hendrerit secundum minim incassum valde vicis autem te. Comis capto feugiat wisi.</p>
			</article>
			<article>
				<h3>Headline 3</h3>
				<p>Te iriure in indoles blandit et epulae erat mos delenit nisl. Wisi aliquip susci.</p>
			</article>
			<article>
				<h3>Headline 4</h3>
				<p>Ea delenit ut iaceo quidem. Duis transverbero blandit tation te minim commoveo e.</p>
			</article>
		</section>
		<aside>
			<h2>Subscribe</h2>
			<p>Sign up now to receive updates as we post new content:</p>
			<input type="email" name="join" placeholder="email">
		</aside>
		<footer>
			<p>Best. Blog. Ever.</p>
		</footer>
	</div>
</body>
</html>

Code Explanation

For the desktop (wide) view, we float the section right and the aside left, and float each individual blog post (the articles) left with an effective (width + padding + margin) width of 50%. We add a font-family rule and some background colors, and use article:nth-child(even) to ensure that article elements of different height don't throw off the tiled appearance of our blog items.

For the mobile (narrow) view, we use a media query, targeting a maximum-width of 700 pixels. We un-float the elements, both the aside/section columns and the tiled blog posts (the articles) inside the main column. This produces the layout we want: stacked content spanning the full width of the page, for easier viewing on smaller screen.

Next