Add mobile layout

saleor · Jul 2, 2024 · b5c738a · b5c738a
1 parent 04db8c1
commit b5c738a
Showing 1 changed file with 17 additions and 8 deletions.
diff --git a/components/Steps/styles.module.css b/components/Steps/styles.module.css
@@ -10,8 +10,22 @@
   padding-left: 2rem;
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  gap: 2rem;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.code {
+  padding-bottom: 2rem;
+}
+
+@media (min-width: 1440px) {
+  .stepSection {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 2rem;
+  }
+
+  .details {
+    padding-bottom: 2rem;
+  }
 }
 
 .step:first-child {
@@ -55,11 +69,6 @@
   grid-column: span 7;
 }
 
-.details,
-.code {
-  padding-bottom: 2rem;
-}
-
 .column {
-  width: 50%;
+  max-width: 600px;
 }