Phase 5: Apply grid and media queries to the original page design. Tweak CSS as required.

Now that we have prototyped some grid settings and media queries that work with our most complex row in our design, let’s try applying these settings to the rest of the page.

Apply the appropriate HTML classes to the layout you have presently. Use <div> tags for the rows, mostly, while leaving more semantic tags with the grid classes. Look in the finish folder for the marked-up page.

Next: Make the following changes to the CSS.

1. Eliminate the div declaration on line 78 of the CSS file. (It breaks everything!)

2. Remove the “Martha Stewart colors” associated with the various declarations. We used these for testing our grid system, but they’re not needed now.

View the page with the media queries used for the grid system. Check the design. Are these default breakpoints still OK, or do they need tweaking?

The “Discover Arlington” box doesn’t look too awesome… maybe some additional tweaking is needed? We can reduce the font size as the screen get smaller, for example. (We’ll deal with resizing this image the right way in phases 7 and 8.)

/* adjust "discover" box for smaller width */
@media only screen and (min-width: 702px) and (max-width: 866px)  {
main h2 {
	font-size: 2.5em;
	padding-top: 0em;
}
main p {
	font-size: 1.5em;
	font-family: 'Cabin Condensed', sans-serif;
}
}

OK, better… maybe time to add another tweak for smaller screens? And how about that nav bar? You could add some JavaScript to make that appear/disappear (maybe behind a Hamburger Button!), or you could shorten it using the styles below.

/* adjust "discover" box again and change nav layout */
@media only screen and (max-width: 701px)  {
main {
	padding: 0 3.333333%; /* aligns with boxes underneath */
}
main h2 {
	font-size: 2em;
	padding-top: 0em;
}
main p {
	font-size: 1.2em;
	font-family: 'Cabin Condensed', sans-serif;
}
main img {
	float: none;
	margin: 0;
	width: 100%;
	max-width: 400px;
}
nav ul a {
	display: block;
	float: none;
	padding-left:3.333333%;
}
/* splits nav into 2 columns
http://stackoverflow.com/questions/13104818/simple-2-column-navigation-with-css-and-a-single-list */
nav li:nth-child(even) {
  width: 50%;
  float: right; 
}
nav li:nth-child(odd) {
  width: 50%;
  float: left;
}
}