Enhancing a Web Site with Advanced CSS - HTML, CSS, and Dynamic HTML - page 631

figure 8-63 Dubcek mobile view

mobile page in
portrait orientation

mobile page in landscape
orientation

19. Kevin has already written the general style rules for the document. He wants you to
create specific style rules for when the document is displayed in portrait and land-
scape orientation. At the bottom of the file, insert an @media rule with a media query
to match a screen device in portrait orientation. Within this @media rule, create a
style rule for list items within the familyLinks navigation list to: a) display the list
items as blocks; b) set the width to 40%; c) set the top and bottom margins to 5 pix-
els, and set the left and right margins to 5%; and d) float the list items on the left.
20. Create an @media rule for screen devices in landscape orientation. Within the @media
rule, create a style rule for list items belonging to the parentList class to: a) display the
items as blocks; b) set the width to 45%; c) set the top and bottom margins to 5 pixels,
and set the left and right margins to 2%; and d) float the items on the left.
21. Also within the @media rule for landscape orientation, add a style rule for list items
belonging to the childList class to: a) display the items as blocks; b) set the width to
16%; c) set the top and bottom margins to 5 pixels, and set the left and right margins
to 0.2%; and d) float the items on the left.
22. Save your changes to the file.
23. Return to the dubcek.htm file in your text editor. In the head section of the file, insert
a meta element to set the viewport of the file to match the device width.
24. Add a link to the dfmobile.css style sheet file, loading the style sheet only for
screen elements that are less than or equal to 500 pixels in width. Save your
changes to the file.
25. Open the dubcek.htm file in a mobile device or your Web browser. Verify that as
you resize the browser window or view the mobile device, the layout resembles that
shown in Figure 8-63 for both portrait and landscape orientation.
26. Submit your completed files to your instructor.