From cf8b5bc121f89d15252e50a9c91a8b2beda52e78 Mon Sep 17 00:00:00 2001 From: Martin Kagamino Lehoux Date: Fri, 13 Feb 2026 08:57:26 +0100 Subject: fix: 2-column grid layout on mobile Add media query (max-width: 600px) to force photo grid to 2 columns with tighter gap on small screens. --- static/style.css | 1 + 1 file changed, 1 insertion(+) (limited to 'static/style.css') diff --git a/static/style.css b/static/style.css index e8967db..caf0d1e 100644 --- a/static/style.css +++ b/static/style.css @@ -18,6 +18,7 @@ form button:hover{background:#2563eb} .upload-area .link{color:#7cacf8;cursor:pointer;text-decoration:underline} #upload-progress{margin-top:.5rem;color:#93c5fd;font-size:.9rem} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem} +@media(max-width:600px){.grid{grid-template-columns:repeat(2,1fr);gap:.25rem}} .grid-item{cursor:pointer;border-radius:6px;overflow:hidden;aspect-ratio:1;background:#1a1a1a} .grid-item img{width:100%;height:100%;object-fit:cover;transition:transform .2s} .grid-item:hover img{transform:scale(1.03)} -- cgit v1.3