From 5f1de8b4f0602f67f3b038a433347071a08a4b17 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Sat, 8 Jun 2024 09:17:13 +0200
Subject: [PATCH] feat: Improve responsive design for larger screens

Adjust the media query breakpoint to 991px to enhance the responsive layout for devices with larger screens. Added specific styling for `p.text-center.special-header` to increase the font size for improved readability. Optimized CSS to ensure primary buttons and navigation elements adapt more smoothly across a wider range of device widths. These adjustments make the UI more flexible and visually accessible, addressing user feedback on readability and interaction with key UI elements on tablets and smaller laptop screens.
---
 assets/css/base.css | 46 +++++++++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/assets/css/base.css b/assets/css/base.css
index a3dd0ea..74d3aaa 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -132,7 +132,11 @@ h5 {
 }
 
 /* Responsive Styles */
-@media (max-width: 768px) {
+@media (max-width: 991px) {
+  p.text-center.special-header {
+    font-size: 3rem;
+  }
+
   .navbar .container {
     display: flex;
     flex-direction: column;
@@ -173,29 +177,31 @@ h5 {
     padding: 0 1rem;
   }
 
-  .btn.btn-primary {
-    margin: 1rem auto;
-    display: block;
-    width: 80%;
-  }
-
-  h2 .special-header {
-    font-size: 6rem !important;
-  }
-
-  .special-header {
-    font-size: 2rem;
-  }
-
   .navbar-btn {
     margin: 0 auto !important;
   }
 
-  .that-br {
-    display: none;
-  }
+  @media (max-width: 768px) {
+    .btn.btn-primary {
+      margin: 1rem auto;
+      display: block;
+      width: 80%;
+    }
 
-  .slogan {
-    display: none;
+    h2 .special-header {
+      font-size: 6rem !important;
+    }
+
+    .special-header {
+      font-size: 2rem;
+    }
+
+    .that-br {
+      display: none;
+    }
+
+    .slogan {
+      display: none;
+    }
   }
 }
\ No newline at end of file