Further fix on Current Active Members page

src/pages/current-members.astro

@@ -5,7 +5,7 @@ import '../styles/current-members.scss'; // Make sure to create this SCSS file n
 
 <Layout title="Current Members | UP IECEP">
   <section class="current-members-section">
-    <h1>Current Members</h1>
+    <h1>Current Active Members</h1>
     
     <div class="executive-top">
       <h2>President</h2>

src/styles/current-members.scss

@@ -3,9 +3,8 @@
 .current-members-section {
   padding-block: 8rem;
   padding-inline: 2.81rem;
-  /* Removed the strict max-width: 1400px to allow it to expand more */
   width: 100%; 
-  max-width: 1800px; /* Increased the limit so it uses more of wider screens */
+  max-width: 1800px; 
   margin: 0 auto;
   min-height: 100vh;
 
@@ -14,27 +13,26 @@
     color: $primary;
     font-size: 4.4374rem;
     font-weight: 900;
-    margin-bottom: 4rem;
-    display: none; /* Hiding the H1 since 'President' acts as the top header now */
+    margin-bottom: 2.5rem; /* Restored the heading and adjusted its spacing */
   }
 
   /* Centered President Block */
   .executive-top {
     text-align: center;
-    margin-bottom: 4rem; /* Slightly reduced margin */
-    padding-bottom: 2rem;
+    margin-bottom: 2rem; /* Reduced from 4rem to pull the grid closer */
+    padding-bottom: 1.5rem; /* Reduced to lessen the gap */
     border-bottom: 2px solid rgba(0, 0, 0, 0.1);
 
     h2 {
-      font-size: 1.5rem; /* Reduced from 2rem to be less dominant */
-      color: $primary; /* Changed to primary color to match the theme */
+      font-size: 1.5rem; 
+      color: $primary; 
       margin-bottom: 0.25rem;
       text-transform: uppercase;
       letter-spacing: 0.05rem;
     }
 
     h3 {
-      font-size: 2rem; /* Reduced from 2.5rem */
+      font-size: 2rem; 
       font-weight: 700;
       color: $dark;
     }
@@ -44,7 +42,7 @@
   .committees-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-    gap: 1.5rem; /* The gap stays the same, but the columns will be naturally wider now */
+    gap: 1.5rem; 
     align-items: start;
 
     .committee-column {
@@ -52,7 +50,6 @@
       padding: 1.5rem 1rem;
       border-radius: 1rem;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-      /* Added min-height to keep the boxes looking uniform even if some have fewer members */
       min-height: 100%; 
 
       .committee-head {
@@ -62,15 +59,15 @@
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
         h4 {
-          font-size: 0.9rem; /* Reduced title size */
+          font-size: 0.9rem; 
           color: $primary;
           margin-bottom: 0.5rem;
           text-transform: uppercase;
         }
 
         strong {
-          display: block; /* Ensures the name sits cleanly on its own line */
-          font-size: 1.25rem; /* Increased name size to stand out more than the title */
+          display: block; 
+          font-size: 1.25rem; 
           color: $dark;
           line-height: 1.2;
         }
@@ -96,7 +93,7 @@
 
 @media screen and (max-width: 1400px) {
   .current-members-section {
-    padding-inline: 1.5rem; /* Reduce side padding slightly on medium screens */
+    padding-inline: 1.5rem; 
   }
 }
 
@@ -119,10 +116,18 @@
 
 @media screen and (max-width: 768px) {
   .current-members-section {
-    padding-block: 4rem;
+    padding-top: 7rem; /* Increased top padding to prevent header overlap! */
+    padding-bottom: 4rem;
     padding-inline: 1rem;
 
+    h1 {
+      font-size: 2.5rem; /* Scaled down the H1 for mobile screens */
+      margin-bottom: 2rem;
+    }
+
     .executive-top {
+      margin-bottom: 1.5rem;
+      padding-bottom: 1rem;
       h2 { font-size: 1.25rem; }
       h3 { font-size: 1.75rem; }
     }