I'm setting up my first Responsive Design using CSS3 and HTML5 and so far most of it is working except the content (which is listed first in HTML and floating to right of aside/sidebar) will not stay above the sidebar when I set up float:none; for content in the media query for small devices. The font size of logo (text within an h1 tag) isn't resizing in media either. For some reason those two items are not being called up in the media query and I can't find the problem. The images are resizing nicely however.
Here is the relevant HTML:
<div id="wrapper">
<header>
<div class="floatleft"><img src="images/blah1c.jpg" width="200" height="106" alt=""></div>
<h1 class="logo">Name of Site is here</h1>
</header><br class="clearboth">
<div id="content">
<p class="center">for information on the blah blah blah blah blah blah <br><span style="font-size:20px;">blah blah blah blah blah </span><br> see our <a href="events.htm">Events</a> page.
<br><a href="events.htm"><img src="images/blah-party.jpg" vspace="3em" alt=""></a>
</p>
</div><!-- endcontent -->
<aside>
<div id="nav">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="events.htm">Events</a></li>
<li><a href="donations.htm">Donations</a></li>
<li><a href="volunteers.htm">Volunteers</a></li>
<li><a href="supporters.htm">Supporters</a></li>
<li><a href="contactus.htm">Contact</a></li>
</ul>
</div><!-- end nav -->
</aside>
<footer>
blah blah
</footer>
</div><!-- endwrapper -->
I have all the media queries listed last in the CSS file and queries for small devices as follows:
#wrapper {
width: 80%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #999999;
text-align:left;
max-width:1200px }
header {
width:97%;
background: #ffffff;
padding: 0 1%;
text-align: center; }
.logo {font-size:3.5em;
text-align:center;
color:#cc3333;
text-shadow: 2px 2px 4px #999; } /* right, below, blur-radius, color */
#content {
float:right;
width:70%;
background:#ffffff;
margin: 0 5% 0 0;
border:1px solid #999999; }
aside {
width: 150px; /*don't use % as don't want menu to collapse*/
background: #ffffff;
padding:1% 0 2% 1%;
margin:0 0 0 5px;
border:1px solid #999999; }
footer {
width:97.9166667%;
clear:both;
padding: .08em;
background:#ffffff;
text-align: center; }
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width:320px) and (max-device-width:480px) {
body {background-color:green;}
#wrapper {width:100%;}
.logo {font-size:20%; text-align:left; word-wrap:break-word;}
img { float:left; max-width: 30%;}
h1 {font-size:20%; }
#content {width:25%;float:none;padding:2em;} }
/* Smartphones (landscape) ----------- */
@media only screen and (min-width:321px) { }
/* Smartphones (portrait) ----------- */
@media only screen and (max-width:320px) {
body {background-color:yellow; }
#wrapper {width:100%;}
.logo {font-size:20%; text-align:left; word-wrap:break-word;}
img {float:left; max-width: 30%;}
h1 {font-size:20%; }
#content {width:25%;float:none;padding:2em;} }
I don't have a smartphone so not able to check it on one but from what I understand this should work just resizing the browser screen being as everything else is resizing/collapsing nicely.
Can anyone see what is causing the media queries to not work?
