fix/footer-styling

ucodefusion · Oct 5, 2022 · c49d9c2 · c49d9c2
1 parent 1580bd2
commit c49d9c2
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/components/base/Footer.vue b/components/base/Footer.vue
@@ -1,9 +1,9 @@
 <template>
   <footer class="max-w-screen-xl px-8 mx-auto">
     <div class="w-full border-y border-[#DDDDDD]">
-      <div class="w-full flex flex-wrap space-y-6">
+      <div class="grid xl:grid-cols-4 lg:grid-cols-2 md:grid-cols-2 sm:grid-cols-1">
         <div
-          class="w-full sm:w-1/2 xl:w-fit flex flex-col sm:flex-row sm:px-6 py-6 sm:py-12 sm:space-x-10 sm:border-r border-[#DDDDDD]"
+          class="md:w-full lg:w-full w-full sm:w-1/2 xl:w-fit flex flex-col sm:flex-row sm:px-6 py-6 sm:py-12 sm:space-x-10 sm:border-r-0 border-[#DDDDDD]"
         >
           <div class="sm:hidden xl:block mb-6 sm:mb-0">
             <a href="#">
@@ -19,7 +19,7 @@
           </ul>
         </div>
         <div
-          class="w-full sm:w-1/2 xl:w-fit sm:px-16 py-6 sm:py-12 border-t sm:border-t-0 xl:border-r border-[#DDDDDD]"
+          class="md:w-full lg:w-full lg:border-r w-full sm:w-1/2 xl:w-fit sm:px-16 py-6 sm:py-12 border-t sm:border-t xl:border-r border-[#DDDDDD]"
         >
           <ul class="space-y-4">
             <NavLink name="Products" url="#" />
@@ -30,7 +30,7 @@
           </ul>
         </div>
         <div
-          class="w-full sm:w-1/2 xl:w-fit sm:px-16 py-6 sm:py-12 border-t sm:border-t-0 sm:border-r border-[#DDDDDD]"
+          class="md:w-full md:border-t lg:w-full w-full sm:w-1/2 xl:w-fit sm:px-16 py-6 sm:py-12 border-t sm:border-t-0 sm:border-r-0 border-[#DDDDDD]"
         >
           <ul class="space-y-4">
             <NavLink name="Help Center" url="#" />
@@ -41,7 +41,7 @@
           </ul>
         </div>
         <div
-          class="sm:px-10 py-6 sm:py-12 w-full sm:w-1/2 xl:w-[22rem] space-y-4 border-t sm:border-t-0 border-[#DDDDDD]"
+          class="md:w-full md:border-t lg:w-full sm:px-10 py-6 sm:py-12 w-full sm:w-1/2 xl:w-[22rem] space-y-4 sm:border-t border-[#DDDDDD]"
         >
           <h5 class="text-sm font-medium text-[#666666] focus:outline-none focus:shadow-outline">Newsletter</h5>
           <p class="text-sm text-[#666666] focus:outline-none focus:shadow-outline">