diff --git a/vrobbler/templates/scrobbles/calendar.html b/vrobbler/templates/scrobbles/calendar.html
index b5ec6ce..8b6e798 100644
--- a/vrobbler/templates/scrobbles/calendar.html
+++ b/vrobbler/templates/scrobbles/calendar.html
@@ -144,6 +144,32 @@ header.navbar { display: none !important; }
 .calendar-footer a:hover {
     color: #fff;
 }
+
+@media (max-width: 768px) {
+    .calendar-wrapper {
+        padding: 4px;
+        overflow-y: auto;
+    }
+    .calendar-grid {
+        grid-template-columns: 1fr;
+    }
+    .month-banner {
+        grid-column: 1;
+        font-size: 1.4rem;
+        padding: 12px 10px;
+        gap: 12px;
+    }
+    .month-banner a { font-size: 1.1rem; }
+    .day-header { display: none; }
+    .day-cell {
+        min-height: auto;
+        padding: 8px 10px;
+        border-bottom: 1px solid {{ month_color }}33;
+    }
+    .day-cell[style*="background:transparent"] { display: none; }
+    .day-number { margin-bottom: 2px; }
+    .calendar-footer { grid-column: 1; }
+}
 </style>
 {% endblock %}
 
@@ -164,8 +190,6 @@ header.navbar { display: none !important; }
             {{ month_name }} {{ year }}
             <a href="?date={{ next_month }}{% if active_filter %}&media_type={{ active_filter }}{% endif %}">&rarr;</a>
         </div>
-        <div style="grid-column:1/-1;text-align:center;padding:4px 0;background:{{ month_color }};">
-        </div>
 
         {% for name in day_names %}
         <div class="day-header">{{ name }}</div>