responsive

src/components/Widgets/Content/ContentTopicList/ContentTopicList.vue

@@ -176,18 +176,30 @@ export default {
     margin-bottom: 24px;
   }
   .ContentTopicList__main {
+    $gap: 24px;
     display: flex;
-    gap: 24px;
+    gap: $gap;
+    flex-wrap: wrap;
     justify-content: flex-start;
     $sidebar-width: 312px;
     .ContentTopicList__sidebar {
       width: $sidebar-width;
+      @media screen and (max-width: 800px) {
+        & {
+          width: 100%;
+        }
+      }
     }
     .ContentTopicList__result {
-      width: calc( 100% - #{$sidebar-width} );
+      width: calc( 100% - #{$sidebar-width} - #{$gap} );
       .topic-item {
         width: 100%;
       }
+      @media screen and (max-width: 800px) {
+        & {
+          width: 100%;
+        }
+      }
     }
   }
 }

src/components/Widgets/Store/Cart/components/step1/cartItem.vue

@@ -135,7 +135,9 @@ export default {
   padding: 24px 22px 24px 67px;
   display: flex;
   flex-flow: row;
-  gap: 30px;
+  flex-wrap: wrap;
+  $gap: 30px;
+  gap: $gap;
   min-height: 203px;
   .cart-item__use-type {
     $cart-item__use-type-width: 37px;
@@ -171,9 +173,14 @@ export default {
   }
   .cart-item__thumbnail {
     width: $cart-item__thumbnail-width;
+    @media screen and (max-width: 500px) {
+      & {
+        width: 100%;
+      }
+    }
   }
   .cart-item__info {
-    width: calc( 100% - #{$cart-item__thumbnail-width} );
+    width: calc( 100% - #{$cart-item__thumbnail-width} - #{$gap} );
     color: #212121;
     .cart-item__title {
       font-size: 22px;
@@ -229,6 +236,14 @@ export default {
       right: 20px;
       top: 65px;
       width: 120px;
+      @media screen and (max-width: 500px) {
+        & {
+          position: relative;
+          top: 0;
+          right: 0;
+          width: 100%;
+        }
+      }
     }
     .cart-item__price {
       position: absolute;
@@ -248,6 +263,15 @@ export default {
         color: $primary;
         font-size: 24px;
       }
+      @media screen and (max-width: 500px) {
+        & {
+          position: relative;
+          top: 0;
+          right: 0;
+          width: 100%;
+          margin-bottom: 8px;
+        }
+      }
     }
     .cart-item__products {
       display: flex;
@@ -267,6 +291,11 @@ export default {
         }
       }
     }
+    @media screen and (max-width: 800px) {
+      & {
+        width: 100%;
+      }
+    }
   }
 }
 </style>

src/components/Widgets/Store/Cart/components/step1/step1.vue

@@ -115,18 +115,30 @@ export default {
 
 <style scoped lang="scss">
 .step1 {
+  $gap: 28px;
   display: flex;
   flex-flow: row;
-  gap: 28px;
+  flex-wrap: wrap;
+  gap: $gap;
   $sidebar-width: 312px;
   .step1__cart-items {
-    width: calc( 100% - #{$sidebar-width} );
+    width: calc( 100% - #{$sidebar-width} - #{28px} );
     display: flex;
     flex-flow: column;
     gap: 24px;
+    @media screen and (max-width: 1024px) {
+      & {
+        width: 100%;
+      }
+    }
   }
   .step1__sidebar {
     width: $sidebar-width;
+    @media screen and (max-width: 1024px) {
+      & {
+        width: 100%;
+      }
+    }
   }
 }
 </style>

src/components/Widgets/Store/Cart/components/step2/cartAddress.vue

@@ -135,6 +135,11 @@ export default {
     .cart-address__edit-btn {
 
     }
+    @media screen and (max-width: 800px) {
+      & {
+        flex-flow: column;
+      }
+    }
   }
   :global(.cart-address__dialog-cart) {
     width: 700px;

src/components/Widgets/Store/Cart/components/step2/deliveryInfo.vue

@@ -92,6 +92,11 @@ export default {
         font-size: 18px;
       }
     }
+    @media screen and (max-width: 800px) {
+      & {
+        flex-flow: column;
+      }
+    }
   }
 }
 </style>

src/components/Widgets/Store/Cart/components/step2/step2.vue

@@ -133,18 +133,30 @@ export default {
 
 <style scoped lang="scss">
 .step2 {
+  $gap: 28px;
   display: flex;
+  flex-wrap: wrap;
   flex-flow: row;
-  gap: 28px;
+  gap: $gap;
   $sidebar-width: 312px;
   .step2__cart-info {
-    width: calc( 100% - #{$sidebar-width} );
+    width: calc( 100% - #{$sidebar-width} - #{$gap} );
     display: flex;
     flex-flow: column;
     gap: 24px;
+    @media screen and (max-width: 800px) {
+      & {
+        width: 100%;
+      }
+    }
   }
   .step2__sidebar {
     width: $sidebar-width;
+    @media screen and (max-width: 800px) {
+      & {
+        width: 100%;
+      }
+    }
   }
 }
 

src/components/Widgets/Store/Cart/components/stepper.vue

@@ -77,6 +77,11 @@ export default {
       height: 94px;
       background: #F5F5F5;
       border-radius: 8px;
+      @media screen and (max-width: 800px) {
+        & {
+          height: max-content;
+        }
+      }
     }
     .q-stepper__content {
       .q-panel {