diff --git a/www/js/home.js b/www/js/home.js
index 916c3c9..7303905 100644
--- a/www/js/home.js
+++ b/www/js/home.js
@@ -83,7 +83,7 @@ function loadNotesToCards(notes, oldnotes, callback) {
             continue;
         }
         if (reloadCards) {
-            $("#notecards-bin").append('<div class="col-100 tablet-50 desktop-33 notecard-col grid-item" id="notecard-col-' + note.noteid + '" data-favorite="' + (note.favorite ? "1" : "0") + '">'
+            $("#notecards-bin").append('<div class="col-100 medium-50 large-33 notecard-col grid-item" id="notecard-col-' + note.noteid + '" data-favorite="' + (note.favorite ? "1" : "0") + '">'
                     + '<div class="card notecard" id="notecard-' + note.getID() + '" data-id="' + note.getID() + '" data-favorite="' + (note.getFavorite() ? "1" : "0") + '" data-bg="' + note.getColor() + '" data-fg="' + note.getTextColor() + '" style="background-color: #' + note.getColor() + '; color: #' + note.getTextColor() + ';">'
                     + '<div class="editbtn">'
                     + '<i class="material-icons">edit</i>'
diff --git a/www/pages/home.html b/www/pages/home.html
index 5670667..788b153 100644
--- a/www/pages/home.html
+++ b/www/pages/home.html
@@ -50,9 +50,9 @@
         </div>
 
         <div class="row notecards-row" id="notecards-bin">
-            <div class="col-100 tablet-50 desktop-33" style="visibility: hidden;" id="notecard-col-sizer">
+            <div class="col-100 medium-50 large-33" style="visibility: hidden;" id="notecard-col-sizer">
             </div>
-            <div class="col-100 tablet-50 desktop-33 grid-item" style="display: none;" id="offline-indicator">
+            <div class="col-100 medium-50 large-33 grid-item" style="display: none;" id="offline-indicator">
                 <div class="card">
                     <div class="card-content card-content-padding text-align-center text-color-gray">
                         <div><i class="material-icons" style="font-size: 40pt;">cloud_off</i></div>