Hi,
I've been experimenting with collapsible layouts to go with a responsive skin.
I would like to be able to create a kind of grid effect, where information of the the same format can be displayed consistently.
For example, perhaps the format of a block of content could be a title, an image and some descriptive text arranged vertically in a block. There could be 3 or 4 columns of blocks on a desktop and perhaps 1 or 2 on a mobile phone. I've acheived this to an extent with the markup and css below, but there are limitations, which you can see at this page : http://netmonics.co.uk/Home/MyNotes/SampleResponsiveColumns.aspx
You can see there are 3 columns on a maximised desktop browser window, if you try reducing the width of the window, the columns collapse to two as I set the min width, and then as the window reduces to that similar to a mobile device the mobile.css styling kicks in and there is 1` column of 100% width more or less.
Looking at the css below, you can see I've used two stylesheets, mobile.css, and skin.css for desktop and mobile devices.
So it's not bad, but not exactly what I'd like to do. For certain screen widths, where the columns reduce to two, the 3rd div collapses down under the first div leaving huge white space to the right of column 2. Also when the mobile.css kicks in there is a single column of 100% width but I'd prefer to have two then one as the width reduces, meaning that the dimensions of the boxes would be more consistent.
Another way to do this would be to have the same number of columns for all devices and just shrink the div widths, text and image sizes etc. But I think it would be difficult to make it look right on all devices.
My question is whether there's a better way to create a grid effect, keeping the boxes a similar width, although they can vary a bit. Also eliminating the horrible white space, and the very wide boxes when the window reduces to 1 column.
Regards,
Steve
**********************
HTML
**********************
<div class="pane33_container">
<div class="pane33">
<p>This is just a bit of random text to test sizing</p>
</div>
<div class="pane33">
<p>Column 2</p>
</div>
<div class="pane33">
<p>Column 3</p>
</div>
<div class="pane33">
<p>Column 4</p>
</div>
</div>
****************
CSS
****************
Mobile.css :
.pane33_container {}
.pane33 {width:auto; clear:both; margin:auto;border:solid 1px;padding 5px;float:none;}
skin.css:
.pane33 {height:200px; margin:5px;border:solid 1px;padding 5px;float:left;width:32%;min-width:210px}