diff --git a/index.html b/index.html
index 36976d1..96e221f 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,6 @@
 <!-- loader displays an animation before adding the next batch of cards -->
 <div id="loader">
     <div class="skeleton-card"></div>
-    <div class="skeleton-card"></div>
-    <div class="skeleton-card"></div>
 </div>
 
 <!-- card actions shows the card count and card total (we probably do not need this) -->
diff --git a/styles.css b/styles.css
index 5acf3c8..e20834b 100644
--- a/styles.css
+++ b/styles.css
@@ -1,11 +1,21 @@
 #card-container {
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
+    margin-inline: auto;
+    width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+    /* For bigger than phones */
+    #card-container {
+        max-width: 600px !important;
+    }
 }
 
 .card {
     height: 55vh;
-    width: calc((100% / 3) - 16px);
+    width: calc(100% - 16px);
     margin: 8px;
     border-radius: 3px;
     transition: all 200ms ease-in-out;
@@ -32,7 +42,7 @@
 
 .skeleton-card {
     height: 55vh;
-    width: calc((100% / 3) - 16px);
+    width: calc(100% - 16px);
     margin: 8px;
     border-radius: 3px;
     transition: all 200ms ease-in-out;