mobile friendly cookie house

ethyca · Nov 25, 2024 · ca2be22 · ca2be22
1 parent e3541d9
commit ca2be22
Showing 1 changed file with 31 additions and 0 deletions.
diff --git a/clients/sample-app/src/components/Home/style.module.scss b/clients/sample-app/src/components/Home/style.module.scss
@@ -9,6 +9,7 @@
 
 .main {
   flex-grow: 1;
+  padding-inline: 24px;
 }
 
 .products {
@@ -20,6 +21,12 @@
   max-width: 744px;
   margin: 0 auto;
   margin-top: 77px;
+
+  @media screen and (max-width: 768px) {
+    & {
+      justify-content: center;
+    }
+  }
 }
 
 .product {
@@ -37,6 +44,12 @@
   img {
     margin-bottom: 8px;
   }
+
+  @media screen and (max-width: 768px) {
+    & {
+      width: 100%;
+    }
+  }
 }
 
 .name {
@@ -57,6 +70,12 @@
 
 .purchase {
   margin-top: 10px;
+
+  @media screen and (max-width: 768px) {
+    & {
+      width: 100%;
+    }
+  }
 }
 
 .footer {
@@ -78,6 +97,12 @@
   a:hover {
     color: #5b301d;
   }
+
+  @media screen and (max-width: 768px) {
+    & {
+      flex-direction: column;
+    }
+  }
 }
 
 .modalLink {
@@ -98,4 +123,10 @@
   right: 0;
   margin: 1em;
   color: #171923;
+
+  @media screen and (max-width: 768px) {
+    & {
+      position: relative;
+    }
+  }
 }