Go to the "Flex Layout Styles" section and insert a style rule to display the body element as a flexbox oriented as rows with wrapping. The page body content has two main elements. The section element with the ID sheet contains the panels from the comic book page. The article element contains information about the comic book industry during the Golden Age. Devan wants more of the page width to be given to the comic book sheet. Add a style rule that sets the flex growth and shrink rate of the section#sheet selector to 3 and 1 respectively and set its flex basis size to 301 pixels. Less page width will be given to the article element. Create a style rule to set its flex growth and shrink values to 1 and 3 respectively and set its flex basis size to 180 pixels. Mobile Devices Go to the "Mobile Devices" section and create a media query for screen devices with a maximum width of 480 pixels. With mobile devices, Devan wants each comic book panel image to occupy a single row. Create a style rule that sets the width of img elements belonging to the panel class to 100%. Devan wants the horizontal navigation links to other pages on the Golden Pulps website to be displayed near the bottom of the page. Within the media query, set the flex order of the nav.horizontal selector to 99. Create a style rule to set the flex order of the body > footer selector to 100. Tablet and Desktop Devices Go to the "Tablet and Desktop Devices: Greater than 480 pixels" section and create a media query that matches screen devices with widths greater than 480 pixels. For tablet and desktop devices, you’ll lay out the horizontal navigation list as a single row of links. Within the media query, create a style rule for the nav.horizontal ul selector that displays that element as a flexbox, oriented in the row direction with no wrapping. Set the height of the element to 40 pixels. For the nav.horizontal ul li selector set the flex growth shrink, and basis size values to 1, 1, and auto respectively so that each list items grows and shrinks at the same rate. With wider screens, Devan does not want the panels to occupy their own rows as is the case with mobile devices. Instead, within the media query create style rules, define the width of the different classes of comic book panel images as follows: Set the width of size1 img elements to 100%. Set the width of size2 img elements to 60%. Set the width of size3 img elements to 40%. Set the width of size4 img elements to 30%.
Go to the "Flex Layout Styles" section and insert a style rule to display the body element as a flexbox oriented as rows with wrapping. The page body content has two main elements. The section element with the ID sheet contains the panels from the comic book page. The article element contains information about the comic book industry during the Golden Age. Devan wants more of the page width to be given to the comic book sheet. Add a style rule that sets the flex growth and shrink rate of the section#sheet selector to 3 and 1 respectively and set its flex basis size to 301 pixels.
Less page width will be given to the article element. Create a style rule to set its flex growth and shrink values to 1 and 3 respectively and set its flex basis size to 180 pixels.
Mobile Devices
Go to the "Mobile Devices" section and create a media query for screen devices with a maximum width of 480 pixels.
With mobile devices, Devan wants each comic book panel image to occupy a single row. Create a style rule that sets the width of img elements belonging to the panel class to 100%. Devan wants the horizontal navigation links to other pages on the Golden Pulps website to be displayed near the bottom of the page. Within the media query, set the flex order of the nav.horizontal selector to 99. Create a style rule to set the flex order of the body > footer selector to 100.
Tablet and Desktop Devices
Go to the "Tablet and Desktop Devices: Greater than 480 pixels" section and create a media query that matches screen devices with widths greater than 480 pixels. For tablet and desktop devices, you’ll lay out the horizontal navigation list as a single row of links. Within the media query, create a style rule for the nav.horizontal ul selector that displays that element as a flexbox, oriented in the row direction with no wrapping. Set the height of the element to 40 pixels.
For the nav.horizontal ul li selector set the flex growth shrink, and basis size values to 1, 1, and auto respectively so that each list items grows and shrinks at the same rate.
With wider screens, Devan does not want the panels to occupy their own rows as is the case with mobile devices. Instead, within the media query create style rules, define the width of the different classes of comic book panel images as follows:
- Set the width of size1 img elements to 100%.
- Set the width of size2 img elements to 60%.
- Set the width of size3 img elements to 40%.
- Set the width of size4 img elements to 30%.
We have been given some pixel sixes for mobile and tablet we have to Go to the "Flex Layout Styles" section and insert a style rule to display the body element as a flexbox oriented as rows with wrapping. we have to craete individual media query for mobile and tablet.
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
