Databases
StackOverflow2013
Postsdbo
POHow To Wrap Content That Is Generated Programatically In PHP Through Divs Depending On Screen Res
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow To Wrap Content That Is Generated Programatically In PHP Through Divs Depending On Screen Res
    text
    copied!<p>I have been racking my brains trying to figure out how to change what I have into something that will organise my content into as many rows as necessary and as many columns (divs) as necessary when the screen resolution changes.</p> <p>Basically, my current website set up has a content div with a height of 430px which can accommodate any number of columns because I have a horizontal scroll. Within each column there can be up to 10 rows of data before another column is created for the next lot of data.</p> <p>What I want to do is change the height of the content div to % not px so it will scale with the browser res. My current script will still only output the same number of rows and columns if the content div is too small of too big, so what I want is to have the number of rows less for smaller screen res's and more for higher res screens.</p> <p>I kind of want the content to wrap into the next column (div) if the browser is made smaller.</p> <p>Hope this makes sense.</p> <p>Can someone point me in the right direction? I know this code is currently written differently but I cant think how to do it:</p> <p>functions.php:</p> <pre><code>&lt;?php function printTranscriptions() { global $link; $query = "SELECT * FROM transcriptions ORDER BY artist, title"; if ($result = mysqli_query($link, $query)) { $count = 0; while ($row = mysqli_fetch_row($result)) { if (($count % 10) == 0) { if ($count &gt; 0) { echo "&lt;/div&gt;\n"; } echo '&lt;div class="content_columns"&gt;'."\n"; } $artistTitle = $row[1] . ' - ' . $row[2]; echo '&lt;p&gt;&lt;a href="members_area/transcriptions/' . $artistTitle . '.pdf" target="_self"&gt;' . $artistTitle . '&lt;/a&gt;&lt;/p&gt;'."\n"; $count++; } if ($count &gt; 0) { echo "&lt;/div&gt;\n"; } /* free result set */ mysqli_free_result($result); } } </code></pre> <p>My index file calls the content in the following structure:</p> <pre><code>&lt;!-- Transcriptions page start --&gt; &lt;div class="transcriptions_page"&gt; &lt;h1&gt; Transcriptions &lt;/h1&gt; &lt;div class="content"&gt; &lt;div class="list-wrapper"&gt; &lt;div class="transcription-list"&gt; &lt;?php printTranscriptions();?&gt; &lt;/div&gt; &lt;!-- transcription-list end --&gt; &lt;/div&gt; &lt;!-- list-wrapper end --&gt; &lt;/div&gt; &lt;!-- content end --&gt; &lt;/div&gt; &lt;!-- Transcriptions page end --&gt; </code></pre> <p>My css:</p> <pre><code>.content { display: block; overflow: hidden; background-color: #2D949E; color: #fff; text-shadow: #FAFAFA; margin-top: 75px; margin-left: 10%; margin-right: 10%; padding: 20px 20px 20px 20px; height: 430px; border: 1px solid #99E9F1; } .list-wrapper { overflow: hidden; } .transcription-list { display: block; white-space: nowrap; } .content_columns { display: inline-block; background-color: #429EA8; letter-spacing: 1px; margin-right: 20px; padding: 0 10px; } .content_columns:last-child { margin-right: 0 !important; } </code></pre> <p>Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload