Menu
I'm working on a school assignment, and I'm tasked with converting a pre-defined layout into a responsive smart phone layout. I've pretty much got everything figure out, I believe, but for some reason the width is giving me a hard time even though my @media tags are right and I'm setting my width to my containers as auto. At least that is the information I've gathered from my book. Anyways, was hoping someone could take a look and see if they see what the problem is. Thanks!
JFiddle
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%; }
}
}
852
asked May 15 '26 20:05
You have min-width: 960px;
Try removing the line and see if it helps. Cheers
96
answered May 18 '26 10:05
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With