diff --git a/content/assets/stylesheets/includes/about.scss b/content/assets/stylesheets/includes/about.scss
index 7100ebd..df954a3 100644
--- a/content/assets/stylesheets/includes/about.scss
+++ b/content/assets/stylesheets/includes/about.scss
@@ -66,20 +66,13 @@ table.board-table {
 }
 
 #contact-icons {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  margin-left: 0;
-  margin-top: 0;
-
   > .column {
-    max-width: 70vw;
+    max-width: 40vw;
   }
 
   .contact-circle-option {
-    display: block;
-    max-width: 200px;
+    //display: block;
+    //max-width: 200px;
 
     .contact-circle-wrapper {
       display: block;
diff --git a/content/contact.erb b/content/contact.erb
index ee2924a..3afbf46 100644
--- a/content/contact.erb
+++ b/content/contact.erb
@@ -47,9 +47,10 @@ contact_links:
   <h2 class='subtitle is-4 has-text-centered has-text-weight-light'>bleep bloop</h2>
 
   <!-- Contact buttons -->
-  <ul id='contact-icons' class='columns is-centered is-multiline'>
+  <div id='contact-icons' class='columns is-centered is-multiline is-mobile'>
   <% @item[:contact_links].each do |option| %>
-  <li id='<%= option[:description] %>' class='contact-circle-option column is-one-quarter-desktop is-one-third-tablet is-half-mobile'>
+  <div class='column is-one-quarter-desktop is-one-third-tablet is-half-mobile'>
+    <div id='<%= option[:description] %>' class='contact-circle-option'>
     <a href='<%= option[:link] %>' class='contact-circle-wrapper'>
       <div class='contact-circle is-centered'>
         <div class='contact-circle-pulse grow'></div>
@@ -60,9 +61,10 @@ contact_links:
     <p class='has-text-centered'>
       <a href='<%= option[:link] %>' class='contact-text-link is-link'><%= option[:action] %></a>
     </p>
-  </li>
+    </div>
+  </div>
   <% end %>
-  </ul>
+  </div>
 
   <div id="board">
     <h2>The board (<%= pretty_year @config[:academic_year] %>)</h2>