From 84d449a8647f8c4db734ddd8bf9353f9d15c3da7 Mon Sep 17 00:00:00 2001
From: Julia Miocene <julia.miocene@gmail.com>
Date: Mon, 21 Oct 2024 19:03:18 +0200
Subject: [PATCH] Fix example block on mobile devices

---
 .../3d-cube-with-css/3d-cube-with-css.md      | 28 -------------------
 src/styles/global.css                         | 18 ++++++++++++
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/content/posts/3d-cube-with-css/3d-cube-with-css.md b/src/content/posts/3d-cube-with-css/3d-cube-with-css.md
index 9b3175a..1a6bc2b 100644
--- a/src/content/posts/3d-cube-with-css/3d-cube-with-css.md
+++ b/src/content/posts/3d-cube-with-css/3d-cube-with-css.md
@@ -43,11 +43,6 @@ We usually rotate something to see that it has volume. And we can do it in CSS!
 </div>
 
 <style>
-  .example-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 20px;
-  }
   .example1 .example__view,
   .example2 .example__view,
   .example3 .example__view {
@@ -122,11 +117,6 @@ But it looks like shrinking without `perspective` [property](https://developer.m
 </div>
 
 <style>
-  .example-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 20px;
-  }
   .example4 .example__view,
   .example5 .example__view,
   .example6 .example__view {
@@ -430,15 +420,6 @@ We need to define their anchor points to place all the elements in the right pla
 </div>
 
 <style>
-  .example-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 20px;
-    margin-bottom: 40px;
-  }
-  .example-grid .example {
-    margin: 0;
-  }
   .example12 .example__view,
   .example13 .example__view {
     aspect-ratio: 1/1;
@@ -551,15 +532,6 @@ Now, let’s define anchor points for all the cube faces and rotate them!
 </div>
 
 <style>
-  .example-grid1 {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 20px;
-    margin-bottom: 40px;
-  }
-  .example-grid1 .example {
-    margin: 0;
-  }
   .example-grid1 .example__view {
     aspect-ratio: 1/1;
     perspective: 10000px;
diff --git a/src/styles/global.css b/src/styles/global.css
index 7d4236d..215e9e4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -129,6 +129,7 @@ ul {
 
 .example__view {
   position: relative;
+  overflow: hidden;
 }
 
 .example__code {
@@ -146,6 +147,23 @@ ul {
   accent-color: light-dark(#333, #fff);
 }
 
+@media (width < 600px) {
+  .example {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+.example-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.example-grid .example {
+  margin: 0;
+}
+
 .toc #contents {
   display: none;
 }