diff options
| author | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-02-13 08:57:26 +0100 |
|---|---|---|
| committer | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-02-13 08:57:26 +0100 |
| commit | cf8b5bc121f89d15252e50a9c91a8b2beda52e78 (patch) | |
| tree | cbb80f1f6c72523bdac410d85eec8bb429d691c3 | |
| parent | a2ba8e05e65648dde0551ee831ee2f5744a847a0 (diff) | |
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.
| -rw-r--r-- | static/style.css | 1 |
1 files changed, 1 insertions, 0 deletions
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)} |