Question: Hello, I have one last question for my assignment and I am stumped. Below the desktop media query, add a new comment with the text,
Hello, I have one last question for my assignment and I am stumped. Below the desktop media query, add a new comment with the text, Media Query for Print. Below the comment, add a new media query that targets print. Within the print media query, add a style rule for the body selector that sets the background-color to #fff and the color to #000.
/* Author: Maria Cruz Date: Current Date File Name: styles.css */
/* CSS Reset */
body, header, nav, main, footer, img, h1, ul
{ margin: 0;
padding: 0;
border: 0; }
/* Style rule for images */
img { max-width: 100%;
display: block; }
/* Style rules for mobile viewport */
/* Hide tab-desk class */
.tab-desk { display: none; }
/* Style rules for header content */
header { text-align: center;
font-size: 1.5em;
color: #373684; }
header h1 { font-family: 'DM Serif Display',
serif; font-style: italic; }
/* Style rules for navigation area */
nav { background-color: #373684; }
nav ul { list-style-type: none;
text-align: center; }
nav li { display: block;
font-size: 2em;
border-top: 1px solid #e5e9fc; }
nav li a { display: block;
color: #fff;
text-align: center;
padding: 0.5em 1em;
text-decoration: none; }
/* Style rules for main content */
main { padding: 2%;
background-color: #e5e9fc;
overflow: auto;
font-family: 'Roboto', sans-serif; }
main p { font-size: 1.25em; }
.action { font-size: 1.25em;
color: #373684;
font-weight: bold; }
#piano, #guitar, #violin { margin: 0 2%; }
#info { clear: left;
background-color: #c0caf7;
padding: 1% 2%; }
#info ul { margin-left: 10%; }
.round { border-radius: 8px; }
#contact { text-align: center; }
.tel-link { background-color: #373684;
padding: 2%;
margin: 0 auto;
width: 80%;
text-align: center;
border-radius: 5px; }
.tel-link a { color: #fff;
text-decoration: none;
font-size: 1.5em;
display: block; }
#contact .email-link { color: #4645a8;
text-decoration: none;
font-weight: bold; }
.map { border: 5px solid #373684;
width: 95%;
height: 50%; }
/* Style rules for footer content */
footer { text-align: center;
font-size: 0.65em;
clear: left; }
footer a { color: #4645a8;
text-decoration: none; }
/* Media Query for Tablet Viewport */
@media screen and (min-width: 550px), print { }
/* Tablet Viewport: Show tab-desk class, hide mobile class */
.tab-desk { display: block; }
.mobile { display: none; }
/* Tablet Viewport: Style rule for header content */
span.tab-desk { display: inline; }
/* Tablet Viewport: Style rules for nav area. */
nav li { border-top: none;
display:inline-block;
font-size: 1.5em;
border-right: 1px solid #e5e9fc; }
li:last-child { border-right: none;}
nav li a{ padding-top: .25em;
padding-bottom: .25em;
padding-left: .5em;
padding-right: .5em; }
/* Tablet Viewport: Style rule for map.*/
.map{ width:500px;
height:450px; }
/* Media Query for Desktop Viewport.*/
@media screen and (min-width:769px), print { }
/* Desktop Viewport: Style rule for header.*/
header { padding:2%; }
/* Desktop Viewport: Style rules for nav area.*/
nav li a{ padding-top:.5em;
padding-bottom: .5em;
padding-right: 1.5em;
padding-left: 1.5em; }
a:hover{ color:#373684;
background-color: #e5e9fc; }
/* Desktop Viewport: Style rules for main content */
#info ul { margin-left: 5%; }
main h3{ font-size: 1.5em; }
#piano, #guitar, #violin{
width: 29%;
float: left;
margin-top: 0;
margin-bottom: 0;
margin-left: 2%;
margin-right: 2%; }
/* Media Query for Print*/
@media print{ body{ background-color:#fff; color:#000; } }
Here is the error I am receiving.
Traceback (most recent call last): File "nt-test-525514a0", line 10, in raise AssertionError() AssertionError
with open('music/css/styles.css', 'r') as f: contents = f.read() count = contents.count('body') if "@media print" not in contents: raise AssertionError() if count != 2: print count raise AssertionError() if "background-color: #fff;" not in contents: raise AssertionError() if "color: #000;" not in contents: raise AssertionError()
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
