Activity Instructions
In this activity, you will modify this page so that resizing the browser viewport causes reasonable responsive behavior. You can download a copy here to work on.
First, Examine the HTML and CSS code. This code is written mobile-first, which means it is best viewed at smaller resolutions. Open your developer tools in a side-by-side view with the page, like the figure below.
Now, this looks great from very small sizes up to about 450px wide, when the navigation menu begins to look stretched out. To be sure we will not cut things off too small, let's create a stylesheet that will be applied to sizes over 480. To do this, add the following code to the HTML, below the other LINK tags.
This stylesheet will be visible for common devices like large phones and small-to-mid-size tablets, hence the name phablet.css. Create a new stylesheet with the name phablet.css, and add the following CSS code:
Save and test. Resize the browser viewport and watch for the change.
Finally, for larger screens we will add a panorama banner photo and change the layout of the header's contents to make good use of the space. To do this, add another stylesheet using the following LINK tag and CSS code:
Save and test.