Pickup Soccer - For Phones - Exercise

Contact Us or call 1-877-932-8228
Pickup Soccer - For Phones - Exercise

Pickup Soccer - For Phones

Duration: 20 to 30 minutes.

In this exercise, you will update the Pickup Soccer site for mobile devices - we'll use media queries to display the site like this on a phone:

Pickup Soccer site - phone view

  1. Open MediaQueries/Exercises/devicewidth/index.html and MediaQueries/Exercises/devicewidth/css/style.css in your file editor.
  2. Add a viewport tag to index.html.
  3. Write CSS to display the main nav below the header (rather than floated within).
  4. Write CSS to display the sidebar below the main column (rather than floated to the right of).

Solution:

MediaQueries/Solutions/devicewidth/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-device-width: 480px) {
	#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-device-width: 480px) {
	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-device-width: 480px) {
	nav ul li a {
		color:#000;
		margin-left:10px;
	}
}

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

@media screen and (max-device-width: 480px) {
	#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-device-width: 480px) {
	#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 construct queries with max-device-width: 480px to target narrow devices, unfloating the nav:

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

#maincontent:

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

and #sidebar elements:

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