Responsive Design for a Simple Blog (Three Views) - Exercise

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

Responsive Design for a Simple Blog (Three Views)

Duration: 15 to 30 minutes.

In this exercise, you will use CSS3 media queries to render a third layout for the blog from your earlier work.

  1. Open ClassFiles/CSS101MediaQueries/Exercises/three-col.html in a browser and in a code editor.
  2. The HTML markup is again provided for you, and is the same as in the previous exercise except for classes on the blog articles: all blog posts have a class of ordinary but for one featured post, with class featured.
  3. The ordinary blog post items have alternating classes of odd and even.
  4. Write CSS code to render the page as shown for large desktop views, at browser widths greater than 1000 pixels (or whatever value you deem appropriate): wide The "featured" post displays as a right-most column; use absolute positioning for this item. The other posts tile, two-across, in the large center column. The image (present for each post item) should not display for the "featured" post; be sure to use max-width: 100% to ensure that the image doesn't break the design.
  5. Use a media query to render a layout for browser widths between 600 pixels and 1000 pixels, as shown: medium This layout is similar to the wider layout, but the "ordinary" posts stack vertically, one on top of the other.
  6. Finally, create a layout - with another media query - for widths below 600 pixels, with all of the blog-post items ("featured" included) stack vertically; the "featured" item should now appear in whatever order it falls among the posts, and its image should display: small

Solution:

CSS101MediaQueries/Solutions/three-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;
		}
		img {
			max-width: 100%;
		}
		#main {
			background-color: #fff;
			width: 80%;
			margin: 0 auto;
			padding: 2em;
		}
		h2 {
			font-size: 24px;
			margin: 0 0 10px 0;
			padding: 0;
		}
		section h2 {
			height: 30px;
		}
		section {
			float: right;
			width: 78%;
			padding: 0 1%;
			position: relative;
		}
		article.ordinary {
			float: left;
			width: 24%;
			padding: 2%;
			background-color: #ffff99;
			margin: 0 1% 1% 0;
			clear: right;
		}
		article.featured {
			position: absolute;
			top: 40px;
			right: 0;
			width: 38%;
			padding: 2% 2% 10% 2%;
			background-color: #ffff00;
		}
		article.featured img {
			display: none;
		}
		article.odd {
			clear: left;
		}
		aside {
			float: left;
			width: 18%;
			padding: 1%;
			background-color: #ddd;
		}
		footer {
			clear: both;
		}
		@media screen and (max-width: 1000px) {
			article.ordinary {
				width: 52%;
			}
			article.featured {
				width: 39%;
			}
		}
		@media screen and (max-width: 600px) {
			section {
				float: none;
				width: 100%;
				padding: 0;
			}
			article.featured {
				position: static;
			}
			article.featured img {
				display: block;
			}
			article.ordinary, article.featured {
				float: none;
				width: 96%;
				padding: 2%;
				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 class="ordinary odd">
				<h3>Headline 1</h3>
				<img src="building.jpg">
				<p>Ea delenit ut iaceo quidem. Duis transverbero blandit tation te minim commoveo t.</p>
			</article>
			<article class="ordinary even">
				<h3>Headline 2</h3>
				<img src="building.jpg">
				<p>Hendrerit secundum minim incassum valde vicis autem te. Comis capto feugiat wisi.</p>
			</article>
			<article class="ordinary odd">
				<h3>Headline 3</h3>
				<img src="building.jpg">
				<p>Te iriure in indoles blandit et epulae erat mos delenit nisl. Wisi aliquip susci.</p>
			</article>
			<article class="featured">
				<h3>Headline 4</h3>
				<img src="building.jpg">
				<p>Ea delenit ut iaceo quidem. Duis transverbero blandit tation te minim commoveo.</p>
			</article>
			<article class="ordinary even">
				<h3>Headline 5</h3>
				<img src="building.jpg">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed orci sollicit.</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 wide layout, we use absolute positioning to display the "featured" post at right, with a brighter background yellow color. The "ordinary" posts float left with a width small enough to allow them to fit two-to-a-row. We target the odd class to clear every other post.

For the medium layout, we increase the width of the "ordinary" posts to make sure that only one item fits per row.

For the small layout, we unfloat all of the blog-post items, remove the absolute positioning for the "featured" item, and un-hide the "featured" item's image.

Next