<div class="pure-g">
  <div class="pure-u-1-3">
  </div>
  <div class="pure-u-1-3">
    <h1><%= User.find(params[:id]).username %>'s Profile</h1>
    <% if @groups.length > 0 %>
      <h2>Your Groups</h2>
        <ul>
          <% @groups.each do |group| %>
            <li class="user-group"><a href="/groups/<%= group.id %>"><%= group.name %></a></li>
          <% end %>
        </ul>
    <% end %>

    <h2>Your Top 40 Artists</h2>
      <% if @user_artists.length > 0 %>
        <%= render partial: 'artists/rankings_table', locals: {artists: @user_artists} %>
      <% else %>
        <em>You haven't voted on any artists yet. <a href="/">Get started now!</a></em>
      <% end %>

      <% if current_user %>
        <p><%= link_to 'Edit Your Profile', edit_user_path(current_user) %></p>
      <% end %>
  </div>
</div>

<div class="pure-g">
  <div class="pure-u-1-3">
  </div>
  <div class="pure-u-1-3">
    <h1><%= User.find(params[:id]).username %>'s Profile</h1>
    <% if @groups.length > 0 %>
      <h2>Your Groups</h2>
        <ul>
          <% @groups.each do |group| %>
            <li class="user-group"><a href="/groups/<%= group.id %>"><%= group.name %></a></li>
          <% end %>
        </ul>
    <% else %>
      <em>You haven't joined any groups yet. Look at the <a href="/groups">groups page</a> to get started!</em>
    <% end %>

    <h2>Your Top 40 Artists</h2>
      <% if @user_artists.length > 0 %>
        <%= render partial: 'artists/rankings_table', locals: {artists: @user_artists} %>
      <% else %>
        <em>You haven't voted on any artists yet. <a href="/">Get started now!</a></em>
      <% end %>

      <% if current_user %>
        <p><%= link_to 'Edit Your Profile', edit_user_path(current_user) %></p>
      <% end %>
  </div>
</div>

Make user page mobile responsive
Make user page mobile responsive
