.smallscreen

39 views

Skip to first unread message

Aaron Collie

unread,

Feb 17, 2013, 9:50:50 AM2/17/13

to trees...@googlegroups.com

Hey,

I've seen the posts on this list regarding setting a different width for smallscreen devices (particularly, this one), but it just isn't getting through my thick head...

My assumption is that treesaver (?) will add a class to the html element for various things it encounters from browsers/devices such as "mobile" and "smallscreen" (e.g. <html class="smallscreen" /> )

And that you can then use this class value in your css (e.g. .smallscreen .container {width:200px} ) to set custom widths for content displayed on smaller screens.

So for example, I have a 3 column layout with column widths of 400px, so on many smaller screens this column width won't fit. So I attempt to create a smallscreen css:

.smallscreen .column, .smallscreen .container {width: 200px;}

However, when I load the page on a small screen device I get a blank page (pg. 1/1 with nav buttons greyed out).

Am I supposed to create a separate grid in resources.html to for smallscreen to flow through? e.g.:

<div class="grid smallscreen">
    <div class="container smallscreen" data-sizes="title single"></div>
    <div class="column smallscreen"></div>
</div>

I realize this is probably fairly simple css/html concepts but I'm just not getting it. Does any of my assumptions seem wrong, or can someone clarify?

-Aaron

Reply all

Reply to author

Forward

0 new messages