Question
6. In the screenstyles.css file, create a media query for a tablet viewport and use min-width: 481px . 7. Add the following style rules to
6. In the screenstyles.css file, create a media query for a tablet viewport and use min-width: 481px.
7. Add the following style rules to the tablet media query and include comments for each.
img {
width: 80%;
}
nav li {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
padding-left: 0;
padding-right: 0;
width: 18%;
}
main {
clear: left;
}
.mobile {
display: none;
}
.desktop {
display: inline;
}
8. In the screenstyles.css file, create a media query for a desktop viewport and use min-width: 769px.
9. Add the following styles to the desktop media query and include comments for each.
#container {
width: 80%;
}
img {
width: 60%;
}
nav ul {
margin: 0;
padding-left: 0.50%;
padding-right: 0.50%;
}
nav li {
border-radius: 0;
margin-left: 0;
margin-right: 0;
padding: 0;
width: 20%;
white-space: nowrap;
}
nav li a {
display: inline-block;
padding: 0.7em;
font-size: 1.25em;
}
main {
border: none;
border-radius: 1em;
box-shadow: 1em 1em 1em #331400;
margin-top: 1em;
}
10. In the screenstyles.css file, add the following pseudo-classes:
nav li a:link {
color: #FFFFFF;
}
nav li a:hover {
color: #CCFFCC;
font-size: 1.5em;
}
11. In the screenstyles.css file, add a style rule to the desktop viewport to apply the following linear gradient to the background. Insert additional properties and values required to accommodate all major browsers. Include comments for all.
background: linear-gradient(#FFFFFF, #3366CC);
12. In the screenstyles.css file, add a style rule to hide the desktop class for the mobile layout and include a comment.
Source code to be updated:
/* Style for body specifies a background color */ body { background-color: #E0F0FF; }
img { max-width: 80%; }
/* Styles for Mobile Layout */
/* Style for the container centers the page and specifies the width */ #container { width: 100%; margin-left: auto; margin-right: auto; }
/* Style for the header specifies top margin, background color, rounded corners, and center align content */ header { font-family: Verdana, Arial, serif; font-size: 2em; margin-top: 0.2em; margin-bottom: 0.3em; text-align: center; padding: 0.2em; color: #000066; }
#banner { text-align: center; }
/* Style for nav specifies text properties */ nav { font-family: Lucida, "Times New Roman", serif; font-size: 1em; font-weight: bold; text-align: center; }
/* Style specifies padding and margins for unordered list */ nav ul { padding: 0; margin-top: 0.5em; margin-bottom: 0.5em; }
/* Style for nav li specifies the background color, rounded corners, removes bullet style, and applies margins and padding for list items within the navigation */ nav li { background-color: #000066; list-style-type: none; margin: 0.4em; padding: 0.5em; }
/* Style changes navigation link text color to white and removes the underline */ nav li a { color: #FFFFFF; text-decoration: none; }
/* Style for the main specifies a block display, text properties, margins, padding, rounded corners, and borders */ main { display: block; font-family: Georgia, "Times New Roman", sans-serif; font-size: 1em; margin-top: 0.5em; padding: 0.5em; border-radius: 1em; background-color: #FFFFFF; }
/* Style for the footer specifies font size, text alignment, and top margin */ footer { font-size: .70em; text-align: center; margin-top: 2em; }
/* Style displays the mobile class */ .mobile { display: inline; }
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