In the styles.css file, below the last style rule, add a new comment with the text, Media Query for Tablet Viewport. Below the comment, add a media query to target screen and print for a tablet viewport. Use a min-width: 481px. 1 Step 1 In the tablet media query, create a new style rule for the article element that sets the width to 43%, floats the element to the left, and sets a height of 160px. 2 In the tablet media query, create a new style rule for the footer selector that clears a float on the left Step 2 In the styles.css file, below the tablet media query, add a comment with the text, Media Query for Desktop Viewport. Below the comment, add a media query to target a desktop viewport screen with a minimum width of 900px. 1 In the desktop media query, create a style rule for an article selector that sets the width to 27% and the height to 140px. 2 In the desktop media query, create another style rule for the article selector with a hover pseudo-class that sets the background-color to #ffe5dc and the color to #a22c02. 1 Modify the style rule for thebody selector by specifying a background with a linear gradient that uses a direction of to left, first color value of #fe9972, and second color value of #ffe5dc. Remove the declaration for the background color from the style rule. 1 Use Google Chrome’s device mode to display the page in a mobile, tablet, and desktop viewport. Exit device mode to view and test the hover pseudo-class.
In the styles.css file, below the last style rule, add a new comment with the text, Media Query for Tablet Viewport. Below the comment, add a media query to target screen and print for a tablet viewport. Use a min-width: 481px.
Step 1
In the tablet media query, create a new style rule for the article element that sets the width to 43%, floats the element to the left, and sets a height of 160px.
In the tablet media query, create a new style rule for the footer selector that clears a float on the left
Step 2
In the styles.css file, below the tablet media query, add a comment with the text, Media Query for Desktop Viewport. Below the comment, add a media query to target a desktop viewport screen with a minimum width of 900px.
In the desktop media query, create a style rule for an article selector that sets the width to 27% and the height to 140px.
In the desktop media query, create another style rule for the article selector with a hover pseudo-class that sets the background-color to #ffe5dc and the color to #a22c02.
Modify the style rule for thebody selector by specifying a background with a linear gradient that uses a direction of to left, first color value of #fe9972, and second color value of #ffe5dc. Remove the declaration for the background color from the style rule.
Use Google Chrome’s device mode to display the page in a mobile, tablet, and desktop viewport. Exit device mode to view and test the hover pseudo-class.
Validate your HTML and CSS files and correct any errors.
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
