Answered step by step
Verified Expert Solution
Question
1 Approved Answer
You have already created the mobile layout, but now need to add media queries for a tablet, desktop, and print. Style the website shown in
You have already created the mobile layout, but now need to add media queries for a tablet, desktop, and print. Style the website shown in Figure for the tablet viewport. Style the website shown in Figure for the desktop viewport. Style the website shown in Figure for a large desktop viewport.
Open the styles.css file in your text editor. Below the last style rule, add a comment with the text, Media Query for Tablet Viewport.
Below the comment, add a media query that targets a screen with a minimum width of px and print.
Add the following comments to the tablet media query:
a Tablet Viewport: Show tabdesk class, hide mobile class
b Tablet Viewport: Style rules for nav area
Add the following style rules below the Show tabdesk class, hide mobile class comment:
a Style rule for the tabdesk class selector that sets the display to a block.
b Style rule for the mobile class selector that sets the display to none.
Add the following style rules below the style rules for nav area comment:
a Style rule for the nav li selector that removes the top border, sets the display to an inlineblock, and sets the font size to em
b Style rule for the nav li a selector that sets the padding to em
In the contact.html file, add mobile to the existing class attribute within the paragraph element on Line
Insert a new Line and add a paragraph element with the tabdesk class. Wrap the phone number, within the paragraph element.
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 that targets a screen with a minimum width of px and print.
Within the desktop media query, add a comment with the text, Desktop Viewport: Style rules for nav area. Add the following style rules below the comment.
a Style rule for the nav li selector that sets the font size to em
b Style rule for the nav li a selector that sets the top and bottom padding to em and the left and right padding to em
c Style rule for the nav li a selector with a hover pseudoclass that sets the color to #af and the background color to #feee
Within the desktop media query, add a comment with the text, Desktop Viewport: Style rules for main content. Below the comment, add a style rule for the #info ul selector that sets the left margin to
In the index.html about.html contact.html and template.html files, wrap all of the elements between the body tags within a single, parent div element with an id attribute of wrapper. Indent all nested elements.
In the styles.css file, below the tablet media query, add a comment with the text, Media Query for Large Desktop Viewports.
Below the comment, add a media query that targets a screen with a minimum width of px Add the following style rules to the large desktop media query:
a Style rule for the body element that sets the background to a linear gradient with the color values #feee and #a
b Style rule for the #wrapper selector that sets the width to px top and bottom margin to and left and right margins to auto
c Style rule for the main selector that sets the background color to #feee
Below the large desktop media query, add a comment with the text, Media Query for Print. Below the comment, add a media query that targets print.
In the print media query, add a style rule for the body selector that sets the background color to white and the font color to black.
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started