Tablet Media Query 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 page body as a flexbox in row orientation with wrapping. Sofia doesn’t want the links paragraph displayed for tablet and desktop devices. Complete the media query for tablet and desktop devices by hiding this paragraph. Tablet Element Styles 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 growth, shrink, and basis values of the article element to 2, 1, and 400 pixels. Set those same values for the aside element to 1, 2, and 200 pixels. Tablet Navigation Lists For tablet and desktop devices, the top navigation list should be displayed as a horizontal row with no wrapping. Enter a style rule to display the top navigation list ul 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 both horizontally and vertically. Define the flex size of each list item in the top navigation list to have a maximum width of 80 pixels but to shrink at the same rate as the width if the navigation list is reduced
Tablet Media Query
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 page body as a flexbox in row orientation with wrapping.
Sofia doesn’t want the links paragraph displayed for tablet and desktop devices. Complete the media query for tablet and desktop devices by hiding this paragraph.
Tablet Element Styles
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 growth, shrink, and basis values of the article element to 2, 1, and 400 pixels. Set those same values for the aside element to 1, 2, and 200 pixels.
Tablet Navigation Lists
For tablet and desktop devices, the top navigation list should be displayed as a horizontal row with no wrapping. Enter a style rule to display the top navigation list ul 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 both horizontally and vertically.
Define the flex size of each list item in the top navigation list to have a maximum width of 80 pixels but to shrink at the same rate as the width if the navigation list is reduced.
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
