Merge pull request #1084 from w3bdesign/1075-ensure-footer-is-always-at-bottom

1075 ensure footer is always at bottom

Author: w3bdesign

components/Category/CategoryShowAll.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="data.productCategories">
-    <section class="mx-auto bg-white">
+    <section class=" bg-white">
       <div
-        class="grid gap-2 px-2 pt-2 pb-2 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-4 sm:grid-cols-2 md:grid-cols-3 xs:grid-cols-3"
+        class="flex justify-center align-middle flex-col md:flex-row"
       >
         <template v-for="nodes in data.productCategories">
           <template v-for="category in nodes">
@@ -14,9 +14,9 @@
                   query: { id: category.id },
                 }"
               >
-                <div class="mt-6 cursor-pointer">
+                <div class="cursor-pointer ml-4 mt-[5rem] md:mt-[20rem] w-full md:w-64 flex-row">
                   <div
-                    class="flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline"
+                    class="p-4 min-w-[10rem] flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline"
                   >
                     <p class="text-lg">
                       {{ category.name }}

components/Layout/LayoutFooter.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="container mx-auto mt-24 max-w-[84.375rem]">
+  <div class="container mx-auto mt-24 max-w-[84.375rem] mb-[6.5rem] md:mb-2">
     <footer
       class="px-6 text-center bg-white border border-gray-300 rounded-lg shadow-lg"
     >
       <div class="p-6">
-        Copyright reserved &copy; {{ todayDate }} Daniel / w3bdesign
+        Copyright reserved &copy; {{ todayDate }} Daniel
       </div>
     </footer>
   </div>

layouts/default.vue

@@ -1,8 +1,10 @@
 <template>
-  <div>
+  <div class="flex flex-col min-h-screen">
     <LayoutNavbar />
-    <div class="container mx-auto max-w-[84.375rem]">
+    <div class="container mx-auto max-w-[84.375rem] flex-grow">
+      <main >
       <slot />
+    </main>
     </div>
     <LayoutFooter />
     <LayoutStickyFooter />

pages/categories.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="flex justify-center items-center">
   <CategoryShowAll />
+  </div>
 </template>
 
 <script setup>