homepage Welcome to WebmasterWorld Guest from 54.196.168.78
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Media only problem with Responsive Design
Making content stay above left sidebar for small screens
Lorel




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

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?

 

alt131




msg:4498436
 8:40 pm on Sep 21, 2012 (gmt 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).
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?

Leosghost




msg:4498449
 9:29 pm on Sep 21, 2012 (gmt 0)

If you are looking for mobile simulators..for testing..
[opera.com...]

( 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 :)

Lorel




msg:4498678
 9:38 pm on Sep 22, 2012 (gmt 0)

@ 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved