Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It appears you are using the web2py scaffolding app, which currently uses <a href="http://getskeleton.com/" rel="nofollow">Skeleton</a> for the responsive grid. It may help to review the <a href="http://getskeleton.com/#grid" rel="nofollow">Skeleton documentation</a>.</p> <p>Note, <code>class="ten columns"</code> does not put the content in the tenth column, it makes the div ten columns wide. If you want something in the tenth column, you should either precede it with a div that is nine columns wide (i.e., <code>class="nine columns"</code>), or offset it with <code>class="one column offset-by-nine"</code> (actually, you probably want it wider than just one column, which is only 40px wide). Note, within a given row, the total number of columns (including offset columns) should add up to no more than 16. Specifically, in your case, you might try:</p> <pre><code> &lt;header class="container"&gt; &lt;div class="nine columns"&gt; &lt;h1&gt;tukker.me&lt;/h1&gt; &lt;/div&gt; &lt;div class="one column"&gt; &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Privacy&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/div&gt; &lt;/header&gt; </code></pre> <p>That will put your h1 header in the first nine columns and your nav ul in the tenth column (to the right of the h1). If you want the nav ul to be more than one column (40px) wide, just specify its class with the number of columns you want (e.g., <code>class="four columns"</code>). Note, because the h1 div takes up 9 of the 16 available columns, the nav div should not be more than 7 columns wide, otherwise, it will get pushed down below the h1 instead of being floated to the right of it (that is what was happening when you had it set to be 10 columns wide).</p>
    singulars
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      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