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:
<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 -->
I don't have a smart phone, but was able to reproduce the desired styles on a PC. However, as I'm not testing on the correct device, I've laid out my reasoning so you can decide which bits help. If any do, let me know and I'll make a broader call to see if we can find some people with the right devices to test.
Media queries are in flux as the candidate recommendation is being revised but is still in editors draft, and they are affected by HTML5 which is still a working draft. However, best I can tell, the following has not changed:
The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport ... including the size of a rendered scroll bar (if any). and: ‘device-width’ media feature describes the width of the rendering surface of the output device. For continuous media, this is the width of the screen. Media Queries [w3.org] (My bold)
Reducing this for simplicity, your css is querying: (minimum device rendering width:320px) and (maximum device rendering width:480px) =background-color:green and (maximum viewport width:320px) = background-color:yellow
That means the queries are measuring two different things, and the first rule (green background) won't apply if the device has a width greater than 480px (such as a PC monitor), but the second rule (yellow background) will apply on any device when the viewport is resized below 320px.
That allowed me to reproduce all the desired style changes* in ff and Op, plus winSafari if a greater width was used (because the PC version won't allow the viewport to be reduced below around 328px). ie<9 do not support media queries, but I'd expect the same behaviour in ie9. Just to test I also replaced max-device-width with max-width and the first rule (background-color:green) was also applied as the viewport resized.
That might indicate width would be a better option than device-width, but I'd suggest more research: Some devices have issues reporting width and that may or may not affect site performance in the wild.
* On font-size, that is set at 20% - were you really wanting it that small?