Linearizing the Pickup Soccer Site - Exercise

Contact Us or call 1-877-932-8228
Linearizing the Pickup Soccer Site - Exercise

Linearizing the Pickup Soccer Site

Duration: 20 to 30 minutes.

In this exercise, you'll update the Pickup Soccer site again, this time presenting the sidebar under the main column at widths under 520px, as shown:

soccer site screenshot

  1. Open MediaQueries/Exercises/sidebarnotfloated/index.html and MediaQueries/Exercises/sidebarnotfloated/css/style.css.
  2. Add a viewport tag to index.html.
  3. Update CSS to show the main nav without floating right and with modified background and text colors for browser widths under 520 pixels.
  4. Update CSS to unfloat the sidebar, sliding it under the main column at widths under 520px.

Solution:

MediaQueries/Solutions/sidebarnotfloated/index.html



  Soccer Pickup
  
  
  




  

Upcoming Games

Barry Park

Sundays, around 2pm; near the back of the largest field

Lakeside Park

Sundays, around 2pm; near the back of the largest field

Schiller Elementary School

Sundays, around 2pm; near the back of the largest field

Central High

Sundays, around 2pm; near the back of the largest field

Adams Park

Sundays, around 2pm; near the back of the largest field

Soccer Pickup: Your guide to finding a game.

Solution:

MediaQueries/Solutions/sidebarnotfloated/css/style.css
body {
	font-family:Georgia,serif;
	background-image:url('../images/bg_grass.jpg');
}

a {
	text-decoration:none;
	color:#4040AD;
}

a:hover {
	text-decoration:underline;
}

#container {
	width:85%;
	margin:0 auto;
	background: #fff url('../images/bg_soccerballs.png') repeat-y 65.520833% 0;
}

@media screen and (max-width: 520px) {
	#container {
		background: #fff;
	}
}

header {
	background-color:#d0b462;
}

header #logo {
	margin:1.0416666% 0 1.0416666% 3.75%;
}

nav {
	padding:1.0416666% 3.75% 1.0416666% 3.75%;
	float:right;
}

@media screen and (max-width: 520px) {
	nav {
		float:none;
		background:#ccc;
	}
}

nav ul {
	display:inline;
}

nav ul li {
	display:inline;
}

nav ul li a {
	color:#fff;
	text-decoration:none;
	margin-left:20px;
}

@media screen and (max-width: 520px) {
	nav ul li a {
		color:#000;
	}
}

#maincontent {
	width:61.7708333333%;
	padding:1.0416666% 0 3.75% 3.75%;
	float:left;
}

@media screen and (max-width: 520px) {
	#maincontent {
		width:96.25%;
		padding:1.0416666% 0 3.75% 3.75%;
		float:none;
	}
}

#maincontent h1 {
	font-size:36px;
	margin:5px 0 20px 0;
}

#maincontent .game {
	float:left;
	width:47.892074199%;
	line-height:14px;
	font-size:14px;
	margin:0.8431703204%;
}

#maincontent .game:nth-of-type(odd) {
    clear:both;
}

#maincontent .game img {
	float:left;
	margin:0 2.86% 0 0;
	max-width:100%;
}

#maincontent iframe {
	max-width:100%;
}

#sidebar {
	width:26.9791666667%;
	float:right;
	padding:3.75%;
	color:#333;
	line-height:20px;
}

@media screen and (max-width: 520px) {
	#sidebar {
		width:96.25%;
		padding:3.75% 0 3.75% 3.75%;
		float:none;
		clear:left;
		background:#ccc;
	}
}

#sidebar h3 {
	font-style:italic;
	font-size:20px;
	margin:0 0 5px 0;
}

#footerinfo {
	clear: both;
	background-color:#151570;
	padding:1.0416666% 0 1.0416666% 3.75%;
}
#footerinfo p {
	color:#fff;
}

We use a media query to unfloat the main nav at widths under 520 pixels:

@media screen and (max-width: 520px) {
	nav {
		float:none;
		background:#ccc;
	}
}

Similarly, we use several more media queries to prevent the floating left and right of the main content and sidebar elements, respectively, forcing the sidebar to fall under the main content when the browser resizes to less than 520 pixels.

@media screen and (max-width: 520px) {
	nav {
		float:none;
		background:#ccc;
	}
}

@media screen and (max-width: 520px) {
	#maincontent {
		width:96.25%;
		padding:0.96% 0 3.75% 3.75%;
		float:none;
	}
}
Next