Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Media only problem with Responsive Design

Making content stay above left sidebar for small screens

6:10 pm on Sep 19, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1908
votes: 3

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">

<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>
</div><!-- endcontent -->

<div id="nav">
<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>
</div><!-- end nav -->

blah blah

</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;
max-width:1200px }

header {
background: #ffffff;
padding: 0 1%;
text-align: center; }

.logo {font-size:3.5em;
text-shadow: 2px 2px 4px #999; } /* right, below, blur-radius, color */

#content {
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 {
padding: .08em;
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?
8:40 pm on Sept 21, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

Hi Lorel, another intersting question.

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).
‘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
(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?
9:29 pm on Sept 21, 2012 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
votes: 412

If you are looking for mobile simulators..for testing..

( the "simulator" works online..the "emulator" works offline and can be downloaded )

You can also find some more for other phones etc ( some are older ) at klauskomenda's site ..in archives..under mobile..at the bottom of the page..or alt131 can maybe link to it..

HTH :)
9:38 pm on Sept 22, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1908
votes: 3

@ Legosghost:
I tried the opera mobile simulator and that is a very good tool to use when trying to format for different size mobile devises.

@alt131. The background colors are just to let me know when the device width changes as I'm testing the layout in my browser for different window widths.

I did considerable changes in the code and the whole page is rendering correctly in smartphone and iPad devices now.

I'm too brain dead to post the updated code.

Thanks for your help.