javascript - css to give variable numbers of columns of data for responsive website -

javascript - css to give variable numbers of columns of data for responsive website -

this isn’t ‘normal’ info display. i’m reading records database (theatre events) , want display them in nicely lined rows , columns. non-responsive, tables-based illustration @ http://cotswoldplayhouse.co.uk/jm3/index.php/what-s-on

what want number of columns go 2 1 screen size reduces. found hints on how hereabouts such css wrapping different numbers of columns in responsive layout 2 3 columns , led experiment @ http://cotswoldplayhouse.co.uk/jm3/index.php/what-s-on-2 it’s going in right direction there number of problems.

the first grab seems need cells in row same size , there no way work out biggest (and hence size others) until know how many in row.

the sec grab various areas of each event need line e.g. top of each image should level. … don’t know how deep image – or text – going be.

i fixed in tables version building row of 4 @ time separate rows title, picture, etc. works can’t (as far know) made responsive. if knew screen size, deliver right number of columns via php but, of course, won’t work media queries client side , php isn’t!

(the whole lot gets wrapped joomla page don't think creates problems.)

sum up, i’m stuck! suggestions gratefully received. steve

code snippet: (this approximation, because code php generated)

class="snippet-code-js lang-js prettyprint-override">$(window).load(function(){ var col_height=0; var col_elem; $('.col').each(function () { $this = $(this); if ( $this.outerheight() > col_height ) { col_elem=this; col_height=$this.outerheight(); } }); $('.col').height(col_height); }); class="snippet-code-css lang-css prettyprint-override">.clear {clear: both;} .col{ border:1px dashed; min-height:20px; margin-bottom: 30px; width:100%; float:left; box-sizing:border-box; } @media screen , (min-width:480px) { .col { width: 50%; } } @media screen , (min-width:880px) { .col { width: 25%; } } table.whatson { table-layout: fixed; margin-left:auto; margin-right:auto; border: none; } table.whatson td { text-align: center; vertical-align: top; padding: 5px; width: 220px; color:#000000; position:relative; } .whatson-title { font-size: large; font-weight: bold; } .whatson-dates { font-weight: bold; } tr.sg-link-row { height: 50px; } div.sg-read-more { position:absolute; left:15px; bottom:2px; } div.sg-read-more a{ display:block; background:url(images/read-more.png) no-repeat 0 0; width:80px; height:40px; text-indent:-9999px; } div.sg-read-more a:hover { background-position:0 -40px; } div.sg-book-ticket { position:absolute; right:15px; bottom:2px; } div.sg-book-ticket a{ display:block; background:url(images/buy-ticket.png) no-repeat 0 0; width:80px; height:40px; text-indent:-9999px; } div.sg-book-ticket a:hover { background-position:0 -40px; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class='col'> <table class='whatson'><tr><td><p class='whatson-title'>blighty bound</p></td></tr><tr> <td>picture placeholder</td></tr><tr> <td><p class='whatson-dates'>26th 29th nov 2014 @ 7.30 pm.</p></td></tr><tr> <td><p class='whatson-company'>cotswold players</p></td> </tr><tr class='sg-link-row'> <td><div class='sg-read-more'>find out more placeholder</div> </tr></table> </div> <div class='col'> <table class='whatson'><tr><td><p class='whatson-title'>cinderella</p></td></tr><tr> <td>picture placeholder</td></tr><tr> <td><p class='whatson-dates'>21st 24th , 28th 31st jan 2015 @ 7.30 pm. (2.30 pm matinees on both saturdays)</p></td></tr><tr> <td><p class='whatson-company'>cotswold players</p></td> </tr><tr class='sg-link-row'> <td><div class='sg-read-more'>find out more placeholder</div> </tr></table> </div> <div class='col'> <table class='whatson'><tr><td><p class='whatson-title'>the autumn of han</p></td></tr><tr> <td>picture placeholder</td></tr><tr> <td><p class='whatson-dates'>6th feb 2015</p></td></tr><tr> <td><p class='whatson-company'>red dragonfly productions</p></td> </tr><tr class='sg-link-row'> <td><div class='sg-read-more'>find out more placeholder</div> </tr></table> </div> <div class='col'> <table class='whatson'><tr><td><p class='whatson-title'>the bronte season - jane eyre</p></td></tr><tr> <td>picture placeholder</td></tr><tr> <td><p class='whatson-dates'>11th feb @ 7.30 pm</p></td></tr><tr> <td><p class='whatson-company'>live wire theatre</p></td> </tr><tr class='sg-link-row'> <td><div class='sg-read-more'>find out more placeholder</div> </tr></table> </div> <div class='col'> <table class='whatson'><tr><td><p class='whatson-title'>the bronte season - wuthering heights</p></td></tr><tr> <td>picture placeholder</td></tr><tr> <td><p class='whatson-dates'>13th feb @ 7.30 pm</p></td></tr><tr> <td><p class='whatson-company'>live wire theatre</p></td> </tr><tr class='sg-link-row'> <td><div class='sg-read-more'>find out more placeholder</div> </tr></table> </div> <div class='col'> <table class='whatson'><tr><td><p class='whatson-title'>the bronte season - tenant of wildfell hall</p></td></tr><tr> <td>picture placeholder</td></tr><tr> <td><p class='whatson-dates'>13th feb @ 7.30 pm</p></td></tr><tr> <td><p class='whatson-company'>live wire theatre</p></td> </tr><tr class='sg-link-row'> <td><div class='sg-read-more'>find out more placeholder</div> </tr></table> </div> <div class='clear'></div> (jsfiddle: http://jsfiddle.net/sclg/xeoqukab/1/)

javascript html css responsive-design multiple-columns