<div class='container'>
  <h1>User groups</h1>
  <%= link_to "Create a group", new_group_path %>
  <h2>Groups you belong to: </h2>
  <h5>(most active at top)</h5>
  <table>
    <tr>
      <th>Group</th>
      <th>Votes</th>
    </tr>
    <%= render @user_groups %>
  </table>
  <h2>Other groups: </h2>
  <h4>To join, you'll need a passcode...</h4>
  <table>
    <tr>
      <th>Group</th>
      <th>Votes</th>
    </tr>
    <%= render @groups %>
  </table>
</div>


<div class="pure-g">
  <div class="pure-u-1-12"></div>
  <div class="pure-u-11-12 pure-u-md-11-12">
    <h1>User groups</h1>
  </div>
</div>

<div class="pure-g">
  <div class="pure-u-1-5"></div>
  <div class="pure-u-4-5 pure-u-md-4-5">
    <h2><%= link_to "Create a group", new_group_path %></h2>
  </div>
</div>

<div class="pure-g">
  <div class="pure-u-1-8"></div>
  <div class="pure-u-7-8 pure-u-sm-3-8">
  <% if @user_groups.length > 0 %>
    <h2>Groups you belong to: </h2>
    <h5>(most active at top)</h5>
    <table class="pure-table">
      <thead>
        <th>Group</th>
        <th>Votes</th>
      </thead>
      <tbody>
        <%= render @user_groups %>
      </tbody>
    </table>
  <% else %>
    <p><em>You haven't joined any groups yet. Create one or get a passcode from a friend!</em></p>
  <% end %>
  </div>
  <div class="pure-u-1-8"></div>
  <div class="pure-u-7-8 pure-u-sm-3-8">
  <h2>Other groups: </h2>
  <h4>To join, you'll need a passcode...</h4>
    <table class="pure-table">
      <thead>
        <th>Group</th>
        <th>Votes</th>
      </thead>
      <tbody>
        <%= render @groups %>
      </tbody>
    </table>
  </div>
</div>

Make groups page mobile responsive
Make groups page mobile responsive
