diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb
index 5e402039..f7eaf6c5 100644
--- a/app/views/main/index.html.erb
+++ b/app/views/main/index.html.erb
@@ -39,7 +39,7 @@
 </div>
 
 <div class="row" id="content-types">
-  <div class="col-md-3">
+  <div class="col-sm-3">
     <div class="card">
       <h1 class="card-heading">Characters</h3>
       <%= image_tag "card-headers/characters.jpg" %>
@@ -56,7 +56,7 @@
     </div>
   </div>
 
-  <div class="col-md-3">
+  <div class="col-sm-3">
     <div class="card">
       <h1 class="card-heading">Equipment</h3>
       <%= image_tag "card-headers/equipment.jpg" %>
@@ -73,7 +73,7 @@
     </div>
   </div>
 
-  <div class="col-md-3">
+  <div class="col-sm-3">
     <div class="card">
       <h1 class="card-heading">Locations</h3>
       <%= image_tag "card-headers/locations.jpg" %>
@@ -90,7 +90,7 @@
     </div>
   </div>
 
-  <div class="col-md-3">
+  <div class="col-sm-3">
     <div class="card">
       <h1 class="card-heading">Magic</h3>
       <%= image_tag "card-headers/magic.jpg" %>
@@ -107,7 +107,7 @@
     </div>
   </div>
 
-  <div class="col-md-3">
+  <div class="col-sm-3">
     <div class="card">
       <h1 class="card-heading">Languages</h3>
       <%= image_tag "card-headers/languages.jpg" %>
@@ -124,7 +124,7 @@
     </div>
   </div>
 
-  <div class="col-md-3">
+  <div class="col-sm-3">
     <div class="card">
       <h1 class="card-heading simple">Universes</h3>
       <%= image_tag "card-headers/universes.jpg" %>