title: resizing menu buttons for mobile devices
body: <p>I'm currently sorting my site out for mobile devices and small screens and I'm a bit stuck with how to size my menu. I have 8 menu buttons as part of a unordered list, as below:</p>
  
  <pre><code>&lt;ul class="menu"&gt;
  &lt;li class="menubar"&gt;&lt;a class="menulink" href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  ..
  .. total of 8 &lt;li&gt; menu buttons
  &lt;/ul&gt;
  </code></pre>
  
  <p>The 'menulink' a class sets each link to 128px. Times that by 8 and it lines up perfectly to my page width of 1024px. I am using @media query to target the changes and on mobile devices want there to be two lines of 4 buttons. The combined width of four buttons needs to equal the screen width I guess. How would I achieve this?</p>
  
  <p>My CSS for the menu is below:</p>
  
  <pre><code>.menu{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;}
  
  li.menubar{float:left;}
  
  a.menulink{
  display:block;
  width:128px;
  background-color:#333333;
  text-align:center;
  padding-top:5px;
  padding-bottom: 5px;
  text-decoration:none;
  text-transform:uppercase;}
  </code></pre>