Chapter 2, Problem 4AYK

Step 20: Mobile Styles     When the user views the page on a mobile device, we don't want the label elements to appear to the left of the input elements because that takes up too much horizontal space. We need to adjust our layout to be more vertical. Create a media query for screens with a maximum width of 767 pixels. Inside the media query, add a rule for any label elements inside the form element with the id registration that removes the float, sets the width to 100%, and aligns the text to the left. Add a rule inside the media query for any input element inside the form element with the id registration that removes the float and sets the width to 100%. Because we set specific widths for the input elements that appear on a single row, we need to override those settings in the mobile view. Add a rule inside the media query for the input elements with the ids city, state, and zip inside the form element with the id registration that sets the maximum width to 100%. Add a rule…

You add a style to the start tag for an element, such as a heading or paragraph, using the style attribute

Flex Layout Styles You’ll layout the golf course pages using a flex layout. Go to the Flex Layout Styles section and create a style rule for the page body that displays the body as a flexbox oriented in the row direction with wrapping. As always, include the -webkit browser extension in all of your flex styles. Navigation List Two of the child elements of the page body are a navigation list with the ID #hole_list and an article element containing information about the current hole. Add a style rule that sets the flex growth, shrink, and basis size values of the hole_list navigation list to 1, 3, and 140 pixels. Article Styles Add a style rule that sets the flex growth, shrink, and basis size values of the article element to 3, 1, and 341 pixels. The article element contains statistics and a summary about the current hole. Michael also wants this element to be treated as a flexbox. Add to the style rule for the article element styles that display the element as a flexbox oriented in the…