fix sidebar

components/FooterBar.vue

@@ -2,7 +2,7 @@
 <template>
   <v-footer class="footer-bar mt-12 flex-wrap" dark padless>
     <v-container class="footer-top">
-      <v-row class="d-flex justify-space-between align-center">
+      <v-row class="d-flex justify-space-between align-center" style="padding-right:11px">
         <v-col
           cols="12"
           md="3"
@@ -20,7 +20,7 @@
           cols="12"
           md="2"
         >
-          <v-text-field label="email address here ..." />
+          <v-text-field label="Email address here ..." />
         </v-col>
         <v-btn color="primary">
           SUBSCRIBE
@@ -89,31 +89,34 @@
         </div>
         <div>
           <v-btn
+            class="btn-social"
             color="black"
             fab
             x-small
             dark
             outlined
           >
-            <v-icon>mdi-facebook</v-icon>
+            <v-icon class="icon-social">mdi-facebook</v-icon>
           </v-btn>
           <v-btn
+            class="btn-social"
             color="black"
             fab
             x-small
             dark
             outlined
           >
-            <v-icon>mdi-twitter</v-icon>
+            <v-icon class="icon-social">mdi-twitter</v-icon>
           </v-btn>
           <v-btn
+            class="btn-social"
             color="black"
             fab
             x-small
             dark
             outlined
           >
-            <v-icon>mdi-instagram</v-icon>
+            <v-icon class="icon-social">mdi-linkedin</v-icon>
           </v-btn>
         </div>
       </v-row>
@@ -167,6 +170,12 @@ export default {
 .content-mid {
     align-items: center !important;
   }
+.btn-social {
+    border: #999 solid;
+  }
+.icon-social {
+    color: #999 !important;
+  }
 @media only screen and (max-width: 500px) {
   .content-mid {
     display:flex;

components/user/Header.vue

@@ -546,6 +546,7 @@ span.icon:hover .v-icon.v-icon{
 .header-middle-right {
   display: flex;
   justify-content: space-between;
+  padding: 0 15px 0 0 !important;
 }
 b {
   display: block;

components/user/NavBar.vue

@@ -38,10 +38,10 @@
       <div class="d-flex align-center none-tag">
         <v-icon>mdi-tag</v-icon>
         <span class="mx-2">
-          Special offer!
+          Special offer
         </span>
         <span class="mx-2">
-          Buy riode
+          Buy riode!
         </span>
       </div>
     </div>

layouts/user.vue

@@ -4,16 +4,16 @@
     <Nuxt />
     <div class="badge-slide">
       <v-btn elevation="2" color="black" tile class="badge">
-        <a href="#our-categories"><v-icon> mdi-home</v-icon></a>
+        <a href="#our-categories" class="btn-a"><v-icon color="white"> mdi-home</v-icon></a>
       </v-btn>
       <v-btn elevation="2" color="black" tile class="badge-1">
-        <a href="#"><v-icon> mdi-information</v-icon></a>
+        <a href="#" class="btn-a"><v-icon> mdi-information</v-icon></a>
       </v-btn>
       <v-btn elevation="2" color="black" tile class="badge-2">
-        <a href="#"><v-icon> mdi-star</v-icon></a>
+        <a href="#" class="btn-a"><v-icon> mdi-star</v-icon></a>
       </v-btn>
       <v-btn elevation="2" color="primary" tile class="badge-3">
-        <a href="#"><v-icon> mdi-cart</v-icon></a>
+        <a href="#" class="btn-a"><v-icon> mdi-cart</v-icon></a>
       </v-btn>
       <a href="#" class="scroll-to-top-btn"><v-icon> mdi-arrow-up-bold</v-icon></a>
     </div>
@@ -125,6 +125,12 @@ export default {
   width:40px !important;
   min-width: 40px !important;
 }
+.btn-a {
+  color:white;
+}
+.badge-slide {
+  z-index: 50
+  }
 @media only screen and (max-width: 768px) {
   .badge-slide {
     display:none;

pages/home-page/index.vue

@@ -326,11 +326,6 @@ export default {
           images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product8.jpg',
           name: 'Hoodie',
           price: '50$'
-        },
-        {
-          images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product9.jpg',
-          name: 'Women bag',
-          price: '50$'
         }
       ],
       posts: [
@@ -414,7 +409,7 @@ export default {
 }
 .grid-example {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   grid-gap: 5px;
 }
 .card-img:hover {