The problem with responsive mobile design doesn't depend on correctness
I am working on a school assignment and I am tasked with converting a pre-defined layout into a flexible smart phone plan. I think I almost got it all figured out, but for some reason the width is giving me a hard time even though my @media tags are correct and I set my width for my containers to be automatic. At least this is the information I have gathered from my book. Anyway, hoping someone could take a look and see if they see what the problem is. Thank!
Html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Door County Wildflowers</title>
<meta charset="utf-8">
<meta name="viewport"
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
<link rel="stylesheet" href="flowers.css" media="only screen and (max-width: 3000px)"/>
<link rel="stylesheet" href="flowers.css" media="only screen and (max-width: 480px)"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="container">
<header role="banner"><span><a href="#content">Skip to Contenthea</a></span>
<h1>Door County Wildflowers</h1>
</header>
<nav role="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="spring.html">Spring</a></li>
<li><a href="summer.html">Summer</a></li>
<li><a href="fall.html">Fall</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<img src="plsthumb.jpg" width="100" height="100" alt="Showy Lady Slipper">
</nav>
<aside role="complementary">
<h3>The Ridges</h3>
<p class="news">The Ridges Nature Sanctuary offers wild orchid hikes during the summer months. For more info, visit <a href=
" http://www.ridgesanctuary.org ">The Ridges</a>.</p>
<h3>Newport State Park</h3>
<p class="news">The <a href=" http://www.newportwildernesssociety.org ">
Newport Wilderness Society</a> sponsors free meadow hikes at 9am every Saturday. Stop by the park office to register.</p>
</aside>
<main role="main" id="content">
<h2>Door County</h2>
<p>Wisconsin’s Door County Peninsula is ecologically diverse — upland and boreal forest, bogs, swamps, sand and rock beaches, limestone escarpments, and farmlands.</p>
<p>The variety of ecosystems supports a large number of wildflower species.</p>
<img src="trillium.jpg" width="200" height="150" alt="Trillium" id="floatright">
<h3>Explore the beauty <br>of Door County Wildflowers. . . .</h3>
<p>With five state parks, tons of county parks, and private nature sanctuaries, Door County is teeming with natural areas for you to stalk your favorite wildflowers.</p>
<footer role="contentinfo"> Copyright © 2014 Door County Wild Flowers<br>
</footer>
</main>
</div>
</body>
</html>
CSS
@media only screen and (max-width: 3000px)
{
header, nav, main, footer, aside { display: block; }
body { margin:0;
background-color: #ffffff; }
#container { background-color: #eeeeee;
color: #006600;
min-width: 960px;
font-family: Verdana, Arial, sans-serif; }
header { background-color: #636631;
background-image: url(showybg.jpg);
background-position: bottom;
background-repeat: repeat-x;
height: 120px;
color: #cc66cc;
text-align: right;
padding: 0 20px;
border-bottom: 2px solid #000000; }
nav { float: left;
width: 150px; }
aside { float: right;
width: 200px; }
main { margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #ffffff;
color: #006600; }
footer { font-size: .70em;
text-align: center;
color: #006600;
background-color: #ffffff;
padding-top: 10px;
clear: both; }
h1 { margin-top: 0;
font-size: 3em;
text-align: left;
text-shadow: 2px 2px 2px #000000; }
header a {font-size: 0.80em; }
header a:link, header a:visited { color: #ffffff; }
header a:focus, header a:hover { color: #eeeeee; }
nav ul { margin-top: 20px;
list-style-type: none; }
nav a { text-decoration: none;
font-size: 1.2em; }
nav a:link { color:#006600;}
nav a:visited { color: #003300; }
nav a:focus, #nav a:hover { color: #cc66cc; }
nav a:active { color: #000000;}
nav img { margin: 30px;}
main p { margin: 20px; }
main h2, main h3 { color: #cc66cc;
background-color: #ffffff; }
#floatright { margin: 10px;
float: right; }
aside h3 { padding-bottom: 2px;
border-bottom: 1px solid #000000;
margin: 10px;
font-size: 0.90em;
color: #cc66cc; }
.news { font-size: 0.80em;
margin: 10px; }
}
@media only screen and (max-width: 480px) {
body { width: auto; margin: 0; }
#container { width: auto; margin: 0; padding: 0;}
header { width: auto; }
nav, nav ul, nav li { float: none; width: auto; padding: 0;}
nav li { inline-block; }
nav a { display: block; padding: 0.5em 0; border-bottom: 2px ridge; }
aside { float: left; width: auto; margin: 0; padding: 0;}
img { display: none; }
#content { width: auto; float: left; margin: 0; padding: 0;}
main { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
p { font-size: 90%; margin: 0; padding: 0;}
h1 { font-size: 100%; }
h3 { font-size: 100%; }
}
}
+3
source to share