I would really appreciate any input to help me out... Here is the mobile css3 st
ID: 3532566 • Letter: I
Question
I would really appreciate any input to help me out...
Here is the mobile css3 style sheet
#mobile { display: inline; }
#desktop { display: none; }
body { background-color: #000033;
color: #666666;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, sans-serif;
background-image: none; }
#wrapper { background-color: #90c7e3;
margin-right: 0;
margin-left: 0;
width:100%;
-webkit-box-shadow: 960px 960px 960px #ffffff;
-moz-box-shadow: 960px 960px 960px #ffffff;
-box-shadow: 960px 960px 960px #ffffff;
min-width: 0px; }
h1 { background-color: #000033;
color: #ffffff;
margin-bottom: 0;
background-image: url(images/sunset.jpg);
background-repeat: no-repeat;
background-position: right;
height: 72px;
font-size: 1.5em;
padding-left: 0.3em;
color: #ffffff;
font-family: Georgia; }
h2 {color: #3399CC;
font-family: Georgia;}
dt {color: #000033; }
h3 { color: #000033; }
/* Navigation Area*/
#nav {
padding: 5px;
font-weight: bold;
float: none;
width: 100%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0; }
#nav a { text-decoration:none;
display: block;
text-align:left;
font-size: 1.3em;
border: 3px outset #cccccc;
padding: 0.2em;
border-bottom: 1px;
border-color: #330000;
}
#nav a:link { color: #000033; }
#nav a:visited { color: #3f5780; }
#nav a:hover {border: 3px inset #666666;
color: #ffffff; }
#nav ul { list-style-type: none;
margin: 0px;
padding: 0px;
float: left; }
#nav li { display: inline; }
#nav leftcolumn {}
#navBottom {display: none;}
.resort { color: #000033;
font-size: 1.2em; }
#content {
background-color: #ffffff;
margin: 0;
padding-top: 0.1em;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0.4em;
font-size:90%;}
#content img { display: none;
float: none;
padding-right: 0px;
}
#content rightcolumn{ background-color: #ffffff }
.clearleft { clear: left;
padding-top: 0;}
#content ul {list-style-position: outside; }
/*----------------------------------------------- footer---------------------------------------------- */
#footer {font-size: .70em;
font-style: italic;
text-align: center;
padding: 0px;
margin: 0px; }
And here is the css3 Print style sheet
/* ---------------------------- body-------------------------------------------- */
#mobile { display: none; }
#desktop { display: inline; }
body {
background-color: #ffffff;
color: #000000;
text-decoration:none;
font-family: Verdana, Arial, sans-serif;
background-image: url(images/background.jpg); }
#wrapper { background-color: #ffffff;
color: #000000;
text-decoration:none;
margin-right: auto;
margin-left: auto;
width:95%;
border-width: thin;
border-style: solid;
border-color: #000000; }
h1 { background-color: #000033;
color: #ffffff;
margin-bottom: 0;
margin-top: 0;
background-image: url(images/sunset.jpg);
background-repeat: no-repeat;
background-position: right;
height: 72px;
color: #ffffff;
font-family: Georgia; }
h2 {color: #3399CC;
font-family: Georgia;}
dt {color: #000033; }
h3 { color: #000033; }
/* Navigation Area*/
#nav { display: none;
padding: 5px;
font-weight: bold;
float: left;
width: 160px;
padding-top: 20px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 20px; }
#nav a { display: none;
text-decoration:none;
display: block;
text-align: center;
font-weight: bold;
border: 3px outset #cccccc;
padding: 5px;
color: #ffffff;
}
#nav a:link { color: #ffffff;
background-color: #000033; }
#nav a:visited { background-color: #90c7e3; }
#nav a:hover {border: 3px inset #666666;
background-color: #3399cc; }
#nav ul { display: none;
list-style-type: none;
margin: 0px;
padding-left: 0px;
float: left; }
#nav li { display: inline; }
#nav leftcolumn {}
#navBottom {display: none; }
.resort { color: #000033;
font-size: 1.2em; }
#content { padding: 0px;
background-color: #ffffff;
color: #000000;
margin: 0px;
width: 90%;
text-decoration:none ;}
#content a:after { content: " (" attr(href) ") ";
text-decoration:none ;
color: #000000;}
#content img { float: left;
padding-right: 20px;
display: block;
}
#content rightcolumn{ text-decoration:none;
background-color: #ffffff;
color: #000000;}
.clearleft { clear: left;}
#content ul {list-style-position: inside;
color: #000000;
text-decoration:none;}
/*----------------------------------------------- footer---------------------------------------------- */
#footer {font-size: .70em;
font-style: italic;
text-align: center;
color:#000000;
padding: 10px;
text-decoration:none;}
Explanation / Answer
@media only screen and (max-device-width: 480px) {
/* define mobile specific styles come here */
}
#logo { background: url(images/logo.png); width: 600px; border: 1px #ccc solid; }
@media only screen and (max-device-width: 480px) {
#logo { background: url(images/logo_mobile.png); width: 440px; }
}<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile-device.css" />