quick styles fix

assets/css/styles.css

@@ -1731,6 +1731,9 @@ html {
   .lg\:grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
+  .lg\:flex-row {
+    flex-direction: row;
+  }
   .lg\:flex-col {
     flex-direction: column;
   }
@@ -1745,6 +1748,16 @@ html {
     margin-right: calc(2rem * var(--tw-space-x-reverse));
     margin-left: calc(2rem * (1 - var(--tw-space-x-reverse)));
   }
+  .lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * (1 - var(--tw-space-x-reverse)));
+  }
+  .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * (1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
   .lg\:px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
@@ -1757,6 +1770,9 @@ html {
     padding-top: 2rem;
     padding-bottom: 2rem;
   }
+  .lg\:text-left {
+    text-align: left;
+  }
   .lg\:text-center {
     text-align: center;
   }

front-page.php

@@ -6,8 +6,10 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
 <section class="h-full overflow-scroll no-scrollbar pt-16 pb-24">
 
   <div class="relative h-20 flex items-center">
+
     <h1 class="w-full px-4 font-medium underline relative z-20 text-white text-xl md:text-2xl lg:text-center">Home</h1>
     <img class="absolute top-0 h-full w-full object-cover" src="<?php echo get_template_directory_uri(); ?>/assets/images/bgs/backsplash.png" alt="Header Banner">
+
   </div>
 
   <!-- Top Level Pages Section -->
@@ -29,9 +31,9 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
 
         <li class="category-cards flex rounded-md shadow-md relative overflow-hidden w-full" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/bgs/<?php echo $pageBG ?>');">
 
-          <a class="relative w-full text-center py-10 space-y-2 flex items-center flex-col justify-center" href="<?php echo $pageSlug ?>">
+          <a class="relative w-full text-center py-4 space-y-2 flex items-center flex-col justify-center" href="<?php echo $pageSlug ?>">
 
-            <div class="absolute inset-0 flex items-center justify-center bg-blue-500 bg-opacity-50 rounded-md py-2 px-2">
+            <div class="bg-blue-500 bg-opacity-50 rounded-md py-2 px-2">
               <!-- <i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i> -->
               <h2 class="text-sm font-medium text-white"><?php echo $pageTitle ?></h2>
               <!-- <p class="font-medium lg:text-center"><?php echo get_field('description', $pageID); ?></p> -->
@@ -60,12 +62,14 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
         </div>
 
         <div class="px-4">
-          <div class="flex items-center py-8 px-4 lg:px-8 rounded-md bg-cadet-200 space-x-4">
+          <div class="flex flex-col lg:flex-row items-center py-8 px-4 lg:px-8 rounded-md bg-cadet-200 lg:space-x-4 space-y-4 lg:space-y-0">
+
             <img class="w-24 lg:w-64" src="<?= get_template_directory_uri() ?>/assets/images/people/deputy-grand-chief-derek-fox.png" alt="Deputy Grand Chief">
-            <div>
+            <div class="text-center lg:text-left">
               <p class="mb-2 font-medium">Derek Fox</p>
               <p>Deputy Grand Chief</p>
             </div>
+
           </div>
         </div>
 
@@ -86,8 +90,10 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
           <li>In any case, this handbook has information to help you on this next step in your education journey</li>
         </ul>
 
-        <div class="flex items-center py-4 lg:py-8 px-4 lg:px-8 bg-cadet-200 space-x-4">
+        <div class="flex flex-col lg:flex-row items-center py-4 lg:py-8 px-4 lg:px-8 bg-cadet-200 space-x-4">
+
           <img class="w-24 lg:w-64 object-cover object-top" src="<?= get_template_directory_uri() ?>/assets/images/people/bachelor-of-nursing-student.png" alt="Congratulation Quote Student">
+
           <div>
             <p class="mb-2 font-medium">Catherine Sergerie, Moose Cree First Nation</p>
             <p>Lakehead University, BScN (Bachelor of Science in Nursing) and a Minor in Indigenous Learning</p>

templates/partials/subcategory_cards.php

@@ -20,7 +20,7 @@ if (count($subpages) > 0) { ?>
         <li class="category-cards flex rounded-md shadow-md relative overflow-hidden w-full" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/bgs/internal/<?php echo $subpage->post_name ?>.png');">
           <a class="relative w-full py-8 px-4 space-y-2 lg:flex lg:flex-col lg:items-center lg:justify-center" href="<?php echo get_site_url() . '/' . $pages[$subpage->post_parent]['page']->post_name . '/' . $subpage->post_name ?>">
 
-            <div class="bg-white inset-0 h-full flex items-center absolute bg-opacity-60 rounded-md py-2 px-4 lg:px-8">
+            <div class="bg-white bg-opacity-60 rounded-md py-2 px-4 lg:px-8">
               <h2 class="font-bold uppercase"><?php echo $subpage->post_title ?></h2>
             </div>