fixed #397

src/components/Widgets/Store/Shop/Shop.vue

@@ -234,15 +234,20 @@ export default {
 <style scoped lang="scss">
 .shop-widget {
   .shop-widget__content {
+    $gap: 24px;
     display: flex;
-    gap: 24px;
+    gap: $gap;
+    flex-wrap: wrap;
     justify-content: flex-start;
     $sidebar-width: 312px;
     .shop-widget__sidebar {
       width: $sidebar-width;
+      @media screen and (max-width: 1024px) {
+        width: 100%;
+      }
     }
     .shop-widget__main {
-      width: calc( 100% - #{$sidebar-width} );
+      width: calc( 100% - #{$sidebar-width} - #{$gap} );
       .shop-widget__main-top-filter {
         .shop-widget__main-top-filter-tools {
           display: flex;
@@ -312,16 +317,25 @@ export default {
           .quasar-crud-index-table {
             padding: 0;
             .q-table__grid-content {
-              margin: -18px;
+              //margin: -18px;
               .shop-widget__result-product-item {
                 width: 33%;
                 padding: 18px;
                 flex: 0 0 auto;
+                @media screen and (max-width: 900px) {
+                  width: 50%;
+                }
+                @media screen and (max-width: 500px) {
+                  width: 100%;
+                }
               }
             }
           }
         }
       }
+      @media screen and (max-width: 1024px) {
+        width: 100%;
+      }
     }
   }
 }

src/components/Widgets/Store/StorePackage/StorePackageShow/StorePackageShow.vue

@@ -171,8 +171,10 @@ export default {
 .package-show {
   $price-section-with: 312px;
   .package-show__summery {
+    $gap: 24px;
     display: flex;
-    gap: 24px;
+    flex-wrap: wrap;
+    gap: $gap;
     align-items: stretch;
     justify-content: flex-start;
     margin-bottom: 24px;
@@ -181,13 +183,19 @@ export default {
       background: #F6F6F6;
       border: 1px solid #DFE1EC;
       padding: 24px;
-      width: calc( 100% - #{$price-section-with} );
+      width: calc( 100% - #{$price-section-with} - #{$gap} );
       display: flex;
+      flex-wrap: wrap;
       gap: 74px;
       align-items: flex-start;
       justify-content: flex-start;
       .package-show__thumbnail {
         width: 239px;
+        @media screen and (max-width: 600px) {
+          & {
+            width: 100%;
+          }
+        }
       }
       .package-show__meta {
         .package-show__title {
@@ -225,6 +233,22 @@ export default {
             }
           }
         }
+        @media screen and (max-width: 600px) {
+          & {
+            width: 100%;
+          }
+        }
+      }
+      @media screen and (max-width: 900px) {
+        & {
+          width: 100%;
+        }
+      }
+      @media screen and (max-width: 600px) {
+        & {
+          gap: 16px;
+          padding-bottom: 0;
+        }
       }
     }
     .package-show__summery-price {
@@ -259,6 +283,13 @@ export default {
         width: 100%;
         background: white !important;
       }
+      @media screen and (max-width: 900px) {
+        & {
+          padding-top: 8px;
+          padding-bottom: 8px;
+          width: 100%;
+        }
+      }
     }
   }
   .package-show__products {

src/components/Widgets/Store/StorePackage/StorePackageShow/components/productItem.vue

@@ -60,13 +60,20 @@ export default {
 .product-item {
   padding: 24px;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   .product-item__meta {
     display: flex;
     gap: 32px;
+    flex-wrap: wrap;
     justify-content: flex-start;
     .product-item__meta-thumbnail {
       width: 123px;
+      @media screen and (max-width: 500px) {
+        & {
+          width: 100%;
+        }
+      }
     }
     .product-item__meta-info {
       .product-item__product-title {
@@ -98,6 +105,16 @@ export default {
           }
         }
       }
+      @media screen and (max-width: 500px) {
+        & {
+          width: 100%;
+        }
+      }
+    }
+    @media screen and (max-width: 1024px) {
+      & {
+        width: 100%;
+      }
     }
   }
   .product-item__price {
@@ -119,15 +136,35 @@ export default {
         font-size: 16px;
         color: #616161;
         margin-right: 25px;
+        @media screen and (max-width: 500px) {
+          & {
+            font-size: 14px;
+          }
+        }
       }
       .product-item__price-info-value {
         font-size: 24px;
         color: #475F4A;
+        @media screen and (max-width: 500px) {
+          & {
+            font-size: 20px;
+          }
+        }
       }
     }
     .product-item__price-action {
       width: 252px;
     }
+    @media screen and (max-width: 1024px) {
+      & {
+        width: 100%;
+      }
+    }
+  }
+  @media screen and (max-width: 1024px) {
+    & {
+      width: 100%;
+    }
   }
 }
 </style>

src/components/Widgets/Store/StoreProduct/StoreProductShow/StoreProductShow.vue

@@ -184,8 +184,10 @@ export default {
 .product-show {
   $price-section-with: 312px;
   .product-show__summery {
+    $gap: 24px;
     display: flex;
-    gap: 24px;
+    flex-wrap: wrap;
+    gap: $gap;
     align-items: stretch;
     justify-content: flex-start;
     margin-bottom: 24px;
@@ -194,13 +196,19 @@ export default {
       background: #F6F6F6;
       border: 1px solid #DFE1EC;
       padding: 24px;
-      width: calc( 100% - #{$price-section-with} );
+      width: calc( 100% - #{$price-section-with} - #{$gap} );
       display: flex;
+      flex-wrap: wrap;
       gap: 74px;
       align-items: flex-start;
       justify-content: flex-start;
       .product-show__thumbnail {
         width: 239px;
+        @media screen and (max-width: 600px) {
+          & {
+            width: 100%;
+          }
+        }
       }
       .product-show__meta {
         .product-show__title {
@@ -238,6 +246,22 @@ export default {
             }
           }
         }
+        @media screen and (max-width: 600px) {
+          & {
+            width: 100%;
+          }
+        }
+      }
+      @media screen and (max-width: 900px) {
+        & {
+          width: 100%;
+        }
+      }
+      @media screen and (max-width: 600px) {
+        & {
+          gap: 16px;
+          padding-bottom: 0;
+        }
       }
     }
     .product-show__summery-price {
@@ -272,6 +296,13 @@ export default {
         width: 100%;
         background: white !important;
       }
+      @media screen and (max-width: 900px) {
+        & {
+          padding-top: 8px;
+          padding-bottom: 8px;
+          width: 100%;
+        }
+      }
     }
   }
   .product-show__products {

src/pages/Public/index.vue

@@ -10,12 +10,38 @@ import { mixinPageOptions, mixinPrefetchServerData, mixinSEO } from 'src/mixin/M
 
 export default {
   name: 'index',
-  mixins: [mixinPrefetchServerData, mixinPageOptions, mixinSEO],
-  data () {
-    return {
-      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'HomePageFirstSection' }] }], options: { boxed: true } }] }, options: { fullHeight: true, backgrounds: { xs: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, sm: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, md: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, lg: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, xl: { size: null, color: null, image: null, repeat: null, position: null, attachment: null } }, verticalAlign: 'center', background: { image: 'assets/images/web/homepage-first-section-background.png', position: 'center', size: 'cover', repeat: 'no-repeat', attachment: 'fixed' }, style: { marginTop: '-120px', minHeight: '100vh', backgroundImage: "url('assets/images/web/homepage-first-section-background.png')", backgroundAttachment: 'fixed' } } }, { data: { rows: [{ cols: [{ widgets: [{ name: 'ClassroomCarousel' }] }], options: { boxed: true } }] }, options: { background: { color: '#F6F6F6' } } }]
-    }
-  }
+  mixins: [mixinPrefetchServerData, mixinPageOptions, mixinSEO]
+  // data () {
+  //   return {
+  //     sections: [
+  //       {
+  //         data: { rows: [{ cols: [{ widgets: [{ name: 'HomePageFirstSection' }] }], options: { boxed: true } }] },
+  //         options: {
+  //           fullHeight: true,
+  //           backgrounds: { xs: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, sm: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, md: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, lg: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, xl: { size: null, color: null, image: null, repeat: null, position: null, attachment: null } },
+  //           verticalAlign: 'center',
+  //           background: {
+  //             image: 'assets/images/web/homepage-first-section-background.png',
+  //             position: 'center',
+  //             size: 'cover',
+  //             repeat: 'no-repeat',
+  //             attachment: 'fixed'
+  //           },
+  //           style: {
+  //             marginTop: '-120px',
+  //             minHeight: '100vh',
+  //             backgroundImage: "url('assets/images/web/homepage-first-section-background.png')",
+  //             backgroundAttachment: 'fixed'
+  //           }
+  //         }
+  //       },
+  //       {
+  //         data: { rows: [{ cols: [{ widgets: [{ name: 'ClassroomCarousel' }] }], options: { boxed: true } }] },
+  //         options: { background: { color: '#F6F6F6' } }
+  //       }
+  //     ]
+  //   }
+  // }
   // mounted () {
   //   this.currenSections = this.sections
   //   this.pageBuilderLoading = false