diff --git a/static/style.css b/static/style.css
index 48ee853..2bcde03 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1489,6 +1489,14 @@ table.normals-table th, table.normals-table td { padding: 8px 12px; text-align:
 table.normals-table thead th { color: var(--muted); font-weight: 600; font-size: 13px; }
 table.normals-table td a { text-decoration: none; }
 table.normals-table tbody tr:hover { background: var(--surface-2); }
+/* On phones, tighten the climate tables so wide values (3-digit °F with the °C in
+   parens) never collide — the records tables are already 3 columns (date folded
+   under each value), and this keeps the city's 4-column normals table roomy too. */
+@media (max-width: 560px) {
+  table.normals-table { font-size: 13px; }
+  table.normals-table th, table.normals-table td { padding: 7px 8px; }
+  .rec-on { font-size: 10.5px; }
+}
 
 .climate-records ul { margin: 8px 0; padding-left: 20px; }
 .climate-records li { margin: 4px 0; }
@@ -1501,6 +1509,9 @@ table.normals-table tbody tr:hover { background: var(--surface-2); }
    legible in both themes; the date column stays muted and untinted. */
 td.t-cell { font-weight: 600; }
 td.rec-date { color: var(--muted); font-size: 13px; }
+/* The date each record occurred, folded under its value so the month/season tables
+   stay 3 columns and fit a phone without horizontal scroll. */
+.rec-on { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 1px; }
 .t-rec-cold  { background: color-mix(in srgb, var(--rec-cold) 26%, var(--surface)); }
 .t-very-cold { background: color-mix(in srgb, var(--very-cold) 26%, var(--surface)); }
 .t-cold      { background: color-mix(in srgb, var(--cold) 28%, var(--surface)); }