From e944bc4f4e6cf4d4143ded729b7b108de9c23f7c Mon Sep 17 00:00:00 2001 From: Jon Andre Briones Date: Thu, 18 Sep 2025 13:16:28 -0700 Subject: [PATCH] Fix(Fall Hacks 2025): Gallery not centered on small screens Issue: On smaller screens, when the gallery images wrapped to a single column, the images would become left-aligned. Root cause: The size of the images were hard coded to be 17.5rem. This meant that if the gallery wrapped the images would be aligned to the left. Solution: Changed the gallery to use grid instead. The images will now attempt to grow to fill the column, unless the column has 17.5rem or higher of horizontal space. At that point, a new column will be made and the row will accommodate another image. --- public/fall-hacks/2025/style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/public/fall-hacks/2025/style.css b/public/fall-hacks/2025/style.css index 2b42e1f..1471bc7 100644 --- a/public/fall-hacks/2025/style.css +++ b/public/fall-hacks/2025/style.css @@ -38,14 +38,14 @@ s { } .img-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); + margin: 0 auto; gap: 1rem; } img { - width: 17.5rem; + width: 100%; aspect-ratio: 1.33 / 1; object-fit: cover; border: 1px solid gray; @@ -65,7 +65,7 @@ img { } .hero__year { - color: darkgreen; + color: #006400; font-size: clamp(1.5rem, 3vw, 4rem); }