fix css

components/DetailModal.vue

@@ -12,6 +12,7 @@
         <v-col>
           <v-carousel hide-delimiters :show-arrows="hover" :width="400">
             <v-carousel-item
+              class="slide-slide"
               v-for="(item, i) in images"
               :key="i"
               :width="400"
@@ -21,8 +22,8 @@
             />
           </v-carousel>
         </v-col>
-        <v-col>
-          <v-row class="flex-row align-center justify-space-between mt-2">
+        <v-col class="half-space">
+          <v-row class="first-row flex-row align-center justify-space-between mt-2">
             <v-card-title v-model="item.name" class="modal-title" style="margin-left:-30px">
               {{ name }}
             </v-card-title>
@@ -113,8 +114,8 @@
                 type="number"
               />
             </v-col>
-            <v-btn color="primary" dense @click="addProductToCard()">
-              Add to card (+)
+            <v-btn class="btnn" color="primary" dense @click="addProductToCard()">
+              Add to cart (+)
             </v-btn>
             <v-btn
               plain
@@ -280,4 +281,20 @@ export default {
   font-weight: 700;
   line-height: 1;
 }
+
+@media only screen and (max-width: 766px) {
+.half-space {
+  padding-left: 70px;
+}
+.btnn {
+  width: 60px;
+  font-size: 14px;
+}
+.first-row {
+  margin-left: 2px;
+}
+.slide-slide {
+  margin-left: 22px;
+}
+}
 </style>

components/user/CategoryTree.vue

@@ -21,27 +21,10 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .dropdown-item {
   box-shadow: 0 2px 35px rgba(0,0,0,0.1);
 }
-li {
-  list-style: none;
-  line-height: 2rem;
-  padding: 0 1.5rem;
-}
-li span {
-  font-size: 15px;
-}
-li > ul {
-  position: absolute;
-  left: 100%;
-  box-shadow: 0 2px 35px rgba(0,0,0,0.1);
-  transition: transform 0.2s ease-out;
-}
-li:hover > ul {
-  transform: translate3d(0,0,0);
-}
 ul.dropdown-item {
   padding: 10px 0;
 }

components/user/Header.vue

@@ -588,6 +588,9 @@ b {
 .v-navigation-drawer--close{
   display: none;
 }
+.v-navigation-drawer {
+  z-index:99;
+}
 
 @media only screen and (max-width: 768px) {
   .header-middle-content {

components/user/NavBar.vue

@@ -145,9 +145,6 @@ export default {
   .none-tag {
     display: flex;
   }
-</style>
-
-<style>
   div .v-treeview-node__label {
     cursor: pointer;
   }
@@ -155,5 +152,10 @@ export default {
     .none-tag {
       display: none !important;
   }
+  .navbar-left {
+    width:100%;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 }
 </style>

components/user/TreeNode.vue

@@ -35,9 +35,26 @@ export default {
     z-index: 1;
     background-color: #ffffff;
     min-width: 250px;
-    top: -10px;
+    top: 0px;
   }
   li:hover > span {
     color: #2266cc;
   }
+  li {
+  list-style: none;
+  line-height: 2rem;
+  padding: 0 1.5rem;
+}
+li span {
+  font-size: 15px;
+}
+li > ul {
+  position: absolute;
+  left: 100%;
+  box-shadow: 0 2px 35px rgba(0,0,0,0.1);
+  transition: transform 0.2s ease-out;
+}
+li:hover > ul {
+  transform: translate3d(0,0,0);
+}
 </style>

pages/users/index.vue

@@ -20,7 +20,7 @@
             <v-container>
               <v-form ref="formEdit">
                 <v-row>
-                  <v-col cols="12" sm="6" md="4">
+                  <v-col cols="12">
                     <v-text-field v-model="eName" label="Legal name*" :rules="nameRules" required />
                   </v-col>
                   <v-col cols="12">
@@ -121,7 +121,7 @@
                     <v-container>
                       <v-form ref="form">
                         <v-row>
-                          <v-col cols="12" sm="6" md="4">
+                          <v-col cols="12">
                             <v-text-field
                               v-model="name"
                               label="Legal name*"