As you continue your work on the website for the Murfreesboro Regional Soccer League, you want to ensure that the layout adapts to different screen sizes. You use media queries and other techniques to make the design of the site responsive.
a. In your editor, open HTM_I-7.html from the IC2 folder where you store your Data Files for this unit, save it as index.html, then repeat to save HTM_I-8.css as styles.css. In the comment at the top of each file, enter your name and today's date where indicated, then save the files. Open index.html in a browser, resize the browser window to its narrowest width, then resize it to its widest width while observing the layout.
b. Return to index.html in your editor, then within the nav element, add a div element with the class value navigation-menu-button before the ul element. Within the div element, add an img element for the file menu.png within the images folder with a width of 60, a height of 60, and alt text of Show navigation. Scroll down to the bottom of the file, then above the closing < /body> tag enter the code < script src="script.js">< /script>. Save your changes.
c. Return to styles.css in your editor, then scroll as necessary to the site navigation section. In the nav.sitenavigation rule, change the padding to 2% on all sides, the width to 16%, and float the element on the right. In the nav.sitenavigation ul style rule, turn off the display of the element, then absolutely position the element 2% from the right side of the parent. In the nav.sitenavigation a style rule, remove the declaration that sets the bottom margin.
d. Scroll to the header section, change the width of the header element to 76%, and turn off the display of the header div element.
e. Scroll to the main content section, change the width of the article element to 100%. Save your changes, refresh or reload index.html in your browser, then view the page at its narrowest and widest widths and verify that the navigation sidebar is not displayed and the menu button is displayed to the right of header. Click the menu button and verify that the navigation menu is displayed below it, then click the button again and verify that the navigation menu is hidden.
f. Return to styles.css in your editor, then above the print styles section, add the text small screen/tablet styles as a comment. Below the new comment, create a media query that applies to devices with screens when the browser window has a minimum width of 500px, or to printed output. Within the media query, add a style rule for the aside element that sets dis- play to block, then add a style rule for the article element that sets the width to 70% and the font size to 2em and floats the element on the left without requiring either side to be clear of other elements. Save your changes, refresh or reload index.html in your browser, resize the browser window to its narrowest width, then resize it to at least 500px wide and verify that the side- bar is displayed on the right side of the layout as shown in FIGURE 1-26.
Figure I-26: see image.
g. Return to styles.css in your editor, then above the print styles section, add the text standard screen styles as a comment. Below the new comment, create a media query that applies to devices with screens when the browser window has a minimum width of 760px, or to printed output. Within the media query, add style rules for the following:
h. Save your changes, refresh or reload index.html in your browser, resize the browser window to its narrowest width, then resize it to at least 760px wide and verify that its layout matches FIGURE I-27.
Figure I-27: see image.
i. Return to styles.css in your editor, then above the print styles section, add the text large screen styles as a comment. Below the new comment, create a media query that applies to devices with screens when the browser window has a minimum width of 1080px. Within the media query, add a style rule for the element with the class value container that sets the width to 1040px. Save your changes, refresh or reload index.html in your browser, resize the browser window to greater than 1080px wide and verify that the width of the page content remains constant as the browser window widens.
j. Return to styles.css in your editor, then in the main content section, add a style rule for each p element within the article element that is the first child of its parent element, setting the top margin to 0. (Hint: Use the selector article p:first-child.) Save your changes, refresh or reload index.html in your browser, then verify that the height of the empty space above the first paragraph of text in the center column is reduced. k. Open index.html in Google Chrome, open the Developer Tools, and then turn on Device Mode. Test your layout in both orientations using the Google Nexus 5, the Apple iPhone 6, and a third device of your choosing.
l. In your browser, open a print preview, then verify that the layout matches the browser rendering for the standard screen styles media query.
m. Return to index.html in your editor, then in the head element and below the link element for styles.css, add the code < script src="respond.min.js">< /script>. Save your changes. If you have access to IE8, open index.html in IE8, resize the browser window to its narrowest width, then resize it as wide as possible and verify that both media queries are applied at the appropriate widths.
n. Validate your HTML and CSS documents.