Home Page Styles At the bottom of the home page is a navigation list with the ID bottom containing several ul elements. Sofia wants these ul elements laid out side-by-side. Create a style rule for the nav#bottom selector displaying its element as a flexbox row with no wrapping. Set the justify-content property so that the flex items are centered along the main axis. For the nav#bottom ul selector, create a style rule to set the flex growth rate to 0, the shrink rate to 1, and the basis value to 150 pixels. Sofia wants more highly contrasting colors when the page is displayed in a mobile device. Create a media query for mobile screen devices with maximum widths of 480 pixels. Within that media query, insert a style rule that sets the font color of the body element to rgb(211, 211, 211) and sets the body background color to rgb(51, 51, 51). Sofia also wants to reduce the clutter in the mobile version of the home page. Hide the following elements for mobile users: the aside element, any img element within the article element, and the spotlight section element. At the top of the web page is a navigation list with the ID top. For mobile devices, create a style rule for the nav#top ul selector, displaying the element as a flexbox row with wrapping. For each list item within the nav#top ul selector, set the font size to 2.2em. Size the list items by setting their flex values to 1 for the growth and shrink rates and 130 pixels for the basis value. Under the mobile layout, the six list items in the top navigation list should appear as square blocks with different background images. Using the selector nav#top ul li:nth-of-type(1) for the first list item, create a style rule that changes the background to the background image cw_image01.png. Center the background image with no tiling and size it so that the entire image is contained within the background. Repeat the previous step for the next five list items using the same general format. Use the cw_image02.png file for background of the second list item, the cw_image03.png file for the third list item background, and so forth up through the nav#top ul li:nth-of-type(6) selector. Format Mobile Hyperlinks Sofia has placed hypertext links for the gallery’s phone number and e-mail address in a paragraph with the ID links. For mobile users, she wants these two hypertext links spaced evenly within the paragraph that is displayed below the top navigation list. To format these links, create a style rule that displays the element referenced by the p#links selector as a flexbox row with no wrapping, then add a style that sets the value of the justify-content property to space-around. She wants the telephone and e-mail links to be prominently displayed on mobile devices. For each p#links a selector, apply the following style rule that: displays the link text in white on the background color rgb(220, 27, 27), sets the border radius around each hypertext to 20 pixels with 10 pixels of padding, and removes any underlining from the hypertext links. Tablet and Desktop Layouts Next, you’ll define the layout for tablet and desktop devices. Create a media query for screen devices whose width is 481 pixels or greater. Within this media query, display the body element as a flexbox in row orientation with wrapping. The page body has four children: the header, the footer, the article element, and the aside element. The article and aside elements will share a row with more space given to the article element. Set the flex growth, shrink, and basis values of the article element to 2, 1, and 400 pixels. Set those same flex values for the aside element to 1, 2, and 200 pixels. For tablet and desktop devices, the top navigation list should be displayed as a horizontal row with no wrapping. Enter a style rule for the nav#top ul selector to display that element as a flexbox with a background color of rgb(51, 51, 51) and a height of 50 pixels. Use the justify-content and align-items property to center the flex items within that flexbox both horizontally and vertically. For the nav#top ul li selector, create a style rule for those list items, setting the flex growth rate to 0, the flex shrink rate to 1, and the basis value to 80 pixels. Sofia doesn’t want the links paragraph displayed for tablet and desktop devices. Complete the media query for tablet and desktop devices by creating a style rule for the p#links selector to hide the paragraph.
Home Page Styles
At the bottom of the home page is a navigation list with the ID bottom containing several ul elements. Sofia wants these ul elements laid out side-by-side. Create a style rule for the nav#bottom selector displaying its element as a flexbox row with no wrapping. Set the justify-content property so that the flex items are centered along the main axis. For the nav#bottom ul selector, create a style rule to set the flex growth rate to 0, the shrink rate to 1, and the basis value to 150 pixels.
Sofia wants more highly contrasting colors when the page is displayed in a mobile device. Create a media query for mobile screen devices with maximum widths of 480 pixels. Within that media query, insert a style rule that sets the font color of the body element to rgb(211, 211, 211) and sets the body background color to rgb(51, 51, 51).
Sofia also wants to reduce the clutter in the mobile version of the home page. Hide the following elements for mobile users: the aside element, any img element within the article element, and the spotlight section element.
At the top of the web page is a navigation list with the ID top. For mobile devices, create a style rule for the nav#top ul selector, displaying the element as a flexbox row with wrapping. For each list item within the nav#top ul selector, set the font size to 2.2em. Size the list items by setting their flex values to 1 for the growth and shrink rates and 130 pixels for the basis value.
Under the mobile layout, the six list items in the top navigation list should appear as square blocks with different background images. Using the selector nav#top ul li:nth-of-type(1) for the first list item, create a style rule that changes the background to the background image cw_image01.png. Center the background image with no tiling and size it so that the entire image is contained within the background.
Repeat the previous step for the next five list items using the same general format. Use the cw_image02.png file for background of the second list item, the cw_image03.png file for the third list item background, and so forth up through the nav#top ul li:nth-of-type(6) selector.
Format Mobile Hyperlinks
Sofia has placed hypertext links for the gallery’s phone number and e-mail address in a paragraph with the ID links. For mobile users, she wants these two hypertext links spaced evenly within the paragraph that is displayed below the top navigation list. To format these links, create a style rule that displays the element referenced by the p#links selector as a flexbox row with no wrapping, then add a style that sets the value of the justify-content property to space-around. She wants the telephone and e-mail links to be prominently displayed on mobile devices. For each p#links a selector, apply the following style rule that:
- displays the link text in white on the background color rgb(220, 27, 27),
- sets the border radius around each hypertext to 20 pixels with 10 pixels of padding, and
- removes any underlining from the hypertext links.
Tablet and Desktop Layouts
Next, you’ll define the layout for tablet and desktop devices. Create a media query for screen devices whose width is 481 pixels or greater. Within this media query, display the body element as a flexbox in row orientation with wrapping. The page body has four children: the header, the footer, the article element, and the aside element. The article and aside elements will share a row with more space given to the article element. Set the flex growth, shrink, and basis values of the article element to 2, 1, and 400 pixels. Set those same flex values for the aside element to 1, 2, and 200 pixels.
For tablet and desktop devices, the top navigation list should be displayed as a horizontal row with no wrapping. Enter a style rule for the nav#top ul selector to display that element as a flexbox with a background color of rgb(51, 51, 51) and a height of 50 pixels. Use the justify-content and align-items property to center the flex items within that flexbox both horizontally and vertically.
For the nav#top ul li selector, create a style rule for those list items, setting the flex growth rate to 0, the flex shrink rate to 1, and the basis value to 80 pixels.
Sofia doesn’t want the links paragraph displayed for tablet and desktop devices. Complete the media query for tablet and desktop devices by creating a style rule for the p#links selector to hide the paragraph.
In this question we have to create a set of CSS style rules for a website's home page, targeting different device sizes and orientations. Specifically, the user is asked to:
- Modify the layout of the bottom navigation list so that its ul elements are laid out side-by-side using flexbox.
- Create a media query for mobile devices that sets the font and background colors of the body element and hides certain elements.
- Modify the layout of the top navigation list for mobile devices so that it uses flexbox with wrapping and its list items are styled with specific font sizes and flex values.
- Format hypertext links for mobile devices so that they are spaced evenly within a paragraph and styled with specific properties.
- Create a media query for tablet and desktop devices that sets the layout of the page body as a flexbox with specific growth, shrink, and basis values for the article and aside elements.
- Modify the layout of the top navigation list for tablet and desktop devices so that it uses flexbox with specific background color and height properties, and its list items are styled with specific flex values.
- Hide a specific paragraph for tablet and desktop devices.
Let's perform and hope this helps if you find any query utilize threaded question feature.
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
