1. Go to the tf_styles4.css file in your editor.

2. Go to the General Flex Styles section. Within this section, you’ll create a flexible display layout that varies in response to changing screen widths. Note that when you use the different flex styles be sure you include the latest WebKit browser extension followed by the W3C specification.

3. In the General Flex Styles section create a style rule for the page body that displays the body as a flexbox oriented as a row, wrapping content to a new line as needed.

4. The page content is divided into two section elements with IDs of left and right. The left section does not need as much of the screen width. Create a style rule for the left section that sets its growth and shrink rates to 1 and 8 respectively and sets its basis size to 130 pixels.

5. The right section requires more screen width. Create a style rule for the right section that sets its growth and shrink values to 8 and 1 and sets its basis size to 351 pixels.

6. Next, you’ll create a flexbox for the section element with class ID of tips that contains an article and a biographical aside, which will be displayed either in two columns or in a single column depending on the screen width. Add a style rule that displays the class of tips section elements as flexboxes in the row direction with wrapping.

7. The articles within each tips section need to occupy more of the screen width. Create a style rule for article elements that lays them out as flex items with a growth value of 2, shrink value of 1, and a basis size of 351 pixels.

8. The biographical asides within each tips section need to occupy less screen space. Create a style rule for aside elements that lays them out as flex items with a growth value of 1, shrink value of 2, and a basis size of 250 pixels.

9. Finally, the horizontal navigation list at the top of the page will also be treated as a flexbox. Create a style rule for the ul element within the horizontal navigation list displaying it as a flexbox in column orientation with wrapping. You do not have to define the sizes of the flex items because the width and height are set in the tf_designs. css style sheet.

10. Go to the Mobile Devices section and create a media query for screen devices with a maximum width of 480 pixels.

11. For mobile devices the vertical list of links to archived parenting tips should be displayed in several columns at the bottom of the page. Within the media query you created in the last step, add the following style rules to a. display the ul element within the vertical navigation list as a flexbox in column orientation with wrapping. Set the height of the element to 240 pixels. b. give the section element with an ID of left a flex order value of 99 to place it near the bottom of the page. c. give the body footer an order value of 100 to put it at the page bottom.

12. Marjorie wants to hide the navigation list at the top of the page when viewed on a mobile device unless the user hovers (or taps) a navicon. Using the technique shown in this tutorial, add the following style rules to set the behavior of the navicon within the media query for mobile devices:

a. Display the navicon by creating a style rule for the a#navicon selector to display it as a block.

b. Hide the contents of the navigation list by adding a style rule that sets the display of the ul element within the horizontal navigation list to none.

c. Display the navigation list contents in response to a hover or touch by creating a style rule for the a#navicon:hover+ul, nav. horizontal ul:hover selector that sets its display value to block.

13. Go to the Tablets and Desktop Devices section. Create a media query for screen devices with a width of at least 481 pixels. Under the wider screens, the contents of the horizontal navigation list at the top of the page should be displayed in several columns. In order to have the list items wrap to a new column, add a style rule to the media query that sets the height of the ul element within the horizontal navigation list to 160 pixels.

14. Save your changes to the style sheet and then open the tf_tips. html file in your browser.

tf_styles4.css

@charset "utf-8";

/*

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 5

Review Assignment

Author:

Date:

Filename: tf_styles4.css

This file contains the screen styles used with the Trusted

Friends blog tips

*/

/* Import Basic Design Styles Used on All Screens */

@import url("tf_designs. css");

/* General Flex Styles */

/*

Mobile Devices: 0 to 480px



*/

/*

Tablet and Desktop Devices: 481px or more



*/