Note that there are some explanatory texts on larger screens.

plurals
  1. POSkeleton framework - four columns site
    primarykey
    data
    text
    <p>i just started to build a website index.html which has a four columns. For some reason columns breaks down in tablet size when i test and resize browser. (last column just drops down)</p> <p>What i have done wrong :-)</p> <p>Here's my simple code so far:</p> <pre><code> &lt;header&gt;&lt;!-- Header osuus --&gt; &lt;div class="four columns"&gt; &lt;a href="http://www.nhl.com"&gt;&lt;img src="images/logo.png" width="220" height="33" class="scale-with-grid" style="margin-top: 119px;"&gt;&lt;/a&gt;&lt;/div&gt; &lt;!-- Navikaatio --&gt; &lt;div class="eleven columns offset-by-one"&gt; &lt;nav class="nav"&gt; &lt;ul class="nav-list"&gt; &lt;li class="nav-item"&gt;&lt;a href="#"&gt;Yritys&lt;/a&gt;&lt;/li&gt; &lt;li class="nav-item"&gt;&lt;a href="#"&gt;Työkalut&lt;/a&gt;&lt;/li&gt; &lt;li class="nav-item"&gt;&lt;a href="#"&gt;Ylläpito&lt;/a&gt;&lt;/li&gt; &lt;li class="nav-item"&gt;&lt;a href="#"&gt;Kehitys&lt;/a&gt;&lt;/li&gt; &lt;li class="nav-item"&gt;&lt;a href="#"&gt;Pilvi&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/div&gt; &lt;/header&gt;&lt;!-- Header päättyy --&gt; &lt;div class="section"&gt; &lt;div class="four columns"&gt; &lt;div class="inner"&gt; dfdfgdfgdf dfg dfg dfg dfg dfg dfgdfgd dfg dfg dfg dfgdfgfdgdf &lt;/div&gt; &lt;/div&gt; &lt;div class="four columns"&gt; &lt;div class="inner"&gt; dfdfgdfgdf dfg dfg dfg dfg dfg dfgdfgd dfg dfg dfg dfgdfgfdgdf &lt;/div&gt; &lt;/div&gt; &lt;div class="four columns"&gt; &lt;div class="inner"&gt; dfdfgdfgdf dfg dfg dfg dfg dfg dfgdfgd dfg dfg dfg dfgdfgfdgdf &lt;/div&gt; &lt;/div&gt; &lt;div class="four columns"&gt; &lt;div class="inner"&gt; dfdfgdfgdf dfg dfg dfg dfg dfg dfgdfgd dfg dfg dfg dfgdfgfdgdf &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- container --&gt; css for inner class: .inner { height: 339px; width: 100%; background-color: #707070; margin-top: 105px; text-align:left; } </code></pre> <p>// Mika</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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