ali 1 éve
szülő
commit
c5ddeb9584

+ 22 - 3
src/components/Widgets/Store/Cart/components/step1/cartItem.vue

@@ -170,10 +170,17 @@ export default {
       width: 32px;
       height: 32px;
     }
+    @media screen and (max-width: 600px) {
+      & {
+        top: 4px;
+        left: auto;
+        right: 4px;
+      }
+    }
   }
   .cart-item__thumbnail {
     width: $cart-item__thumbnail-width;
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: 600px) {
       & {
         width: 100%;
       }
@@ -214,6 +221,13 @@ export default {
           font-size: 16px;
         }
       }
+      @media screen and (max-width: 1200px) {
+        & {
+          flex-flow: column;
+          gap: 8px;
+          margin-bottom: 8px;
+        }
+      }
     }
     .cart-item__type-info {
       position: absolute;
@@ -236,7 +250,7 @@ export default {
       right: 20px;
       top: 65px;
       width: 120px;
-      @media screen and (max-width: 500px) {
+      @media screen and (max-width: 1200px) {
         & {
           position: relative;
           top: 0;
@@ -263,7 +277,7 @@ export default {
         color: $primary;
         font-size: 24px;
       }
-      @media screen and (max-width: 500px) {
+      @media screen and (max-width: 1200px) {
         & {
           position: relative;
           top: 0;
@@ -297,5 +311,10 @@ export default {
       }
     }
   }
+  @media screen and (max-width: 600px) {
+    & {
+      padding: 56px 22px 24px 24px;
+    }
+  }
 }
 </style>

+ 7 - 2
src/components/Widgets/Store/Cart/components/step2/step2.vue

@@ -159,7 +159,7 @@ export default {
     display: flex;
     flex-flow: column;
     gap: 24px;
-    @media screen and (max-width: 800px) {
+    @media screen and (max-width: 1024px) {
       & {
         width: 100%;
       }
@@ -167,12 +167,17 @@ export default {
   }
   .step2__sidebar {
     width: $sidebar-width;
-    @media screen and (max-width: 800px) {
+    @media screen and (max-width: 1024px) {
       & {
         width: 100%;
       }
     }
   }
+  @media screen and (max-width: 1024px) {
+    & {
+      flex-flow: column;
+    }
+  }
 }
 
 :global(.step2__confirm-dialog) {