Fix so it changes in mobile

nicorithner · nicorithner · commit 32b60a11ed6b · 2025-09-14T21:21:53.000-06:00
diff --git a/intersection-observer/app.js b/intersection-observer/app.js
@@ -5,6 +5,6 @@ const observer = new IntersectionObserver((entries) => {
   } else {
     entries[0].target.classList.remove("show");
   }
-}, {threshold: 0.5});
+}, {threshold: 0.3});
 
 observer.observe(section);
diff --git a/intersection-observer/index.html b/intersection-observer/index.html
@@ -9,48 +9,47 @@
   <body>
     <section class="hero">
       <div class="hero-stack">
-        <img class="hero-img" src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=1200&q=80" alt="Hero Art">
+        <img
+          class="hero-img"
+          src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=1200&q=80"
+          alt="Hero Art"
+        />
         <h1 class="hero-title">Let's bring art to your life</h1>
       </div>
     </section>
     <section id="my-work">
       <h2>Some of my best pictures</h2>
       <div class="grid-container">
         <img
-          style="grid-area: img-2"
+          class="img-1"
+          src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80"
+          alt="pic1"
+        />
+        <img
+          class="img-2"
           src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80"
           alt="pic2"
         />
         <img
-          style="grid-area: img-3"
+          class="img-3"
           src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=400&q=80"
           alt="pic3"
         />
         <img
-          style="grid-area: img-4"
+          class="img-4"
           src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=400&q=80"
           alt="pic4"
         />
         <img
-          style="grid-area: img-5"
-          src="https://images.unsplash.com/photo-1465101178521-c1a9136a3b99?auto=format&fit=crop&w=400&q=80"
-          alt="pic5"
-        />
-        <img
-          style="grid-area: img-5"
-          src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&w=400&q=80"
+          class="img-5"
+          src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80"
           alt="pic5"
         />
         <img
-          style="grid-area: img-6"
+          class="img-6"
           src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=400&q=80"
           alt="pic6"
         />
-        <img
-          style="grid-area: img-1"
-          src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80"
-          alt="pic1"
-        />
       </div>
       <a href="#" class="cta-button">See more</a>
     </section>
diff --git a/intersection-observer/styles.css b/intersection-observer/styles.css
@@ -53,47 +53,46 @@
 
 .grid-container {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(3, 120px);
   grid-gap: 1rem;
-  grid-template-areas:
-    "img-1 img-1 img-2 img-3"
-    "img-4 img-5 img-2 img-3"
-    "img-4 img-6 img-6 img-3";
   margin-bottom: 2rem;
-}
-
-.grid-container img[style*="img-1"] {
-  grid-area: img-1;
-  height: 100%;
-}
-.grid-container img[style*="img-2"] {
-  grid-area: img-2;
-  height: 100%;
-}
-.grid-container img[style*="img-3"] {
-  grid-area: img-3;
-  height: 100%;
-}
-.grid-container img[style*="img-4"] {
-  grid-area: img-4;
-  height: 100%;
-}
-.grid-container img[style*="img-5"] {
-  grid-area: img-5;
-  height: 100%;
-}
-.grid-container img[style*="img-6"] {
-  grid-area: img-6;
-  height: 100%;
+  grid-template-columns: 1fr;
+  grid-auto-rows: 200px; /* This ensures each image gets its own row */
 }
 
 .grid-container img {
   width: 100%;
+  height: 200px; /* Fixed height for mobile */
   object-fit: cover;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   display: block;
+  /* Remove any grid-area assignments for mobile */
+  grid-area: auto;
+}
+
+/* Desktop: Bento grid layout */
+@media (min-width: 768px) {
+  .grid-container {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(3, 120px);
+    grid-template-areas:
+      "img-1 img-1 img-2 img-3"
+      "img-4 img-5 img-2 img-3"
+      "img-4 img-6 img-6 img-3";
+    grid-auto-rows: unset;
+  }
+
+  .grid-container img {
+    height: 100%;
+    grid-area: auto;
+  }
+
+  .grid-container img.img-1 { grid-area: img-1; }
+  .grid-container img.img-2 { grid-area: img-2; }
+  .grid-container img.img-3 { grid-area: img-3; }
+  .grid-container img.img-4 { grid-area: img-4; }
+  .grid-container img.img-5 { grid-area: img-5; }
+  .grid-container img.img-6 { grid-area: img-6; }
 }
 
 .cta-button {

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,6 @@ const observer = new IntersectionObserver((entries) => {`
`5`	`5`	`} else {`
`6`	`6`	`entries[0].target.classList.remove("show");`
`7`	`7`	`}`
`8`		`-}, {threshold: 0.5});`
	`8`	`+}, {threshold: 0.3});`
`9`	`9`
`10`	`10`	`observer.observe(section);`