From f55ce25de53b896301544f040c413552b0664caa Mon Sep 17 00:00:00 2001
From: solanki03 <solankisingha23@gmail.com>
Date: Tue, 22 Oct 2024 11:15:45 +0530
Subject: [PATCH] Fixed: Misaligned Audio Player Controls and Inconsistent Left
 Alignments

---
 index.html | 10 +++++-----
 style.css  | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 8fd8521..bf625e8 100644
--- a/index.html
+++ b/index.html
@@ -599,7 +599,7 @@ <h3 class="text-lg mt-2" id="author-gd1">
 
                         <!-- Audio Players Controls Buttons -->
                         <div
-                            class="ctrl-player mt-4 px-5 mx-auto"
+                            class="ctrl-player mt-4 mx-auto"
                             id="ctrl-player"
                         >
                             <div
@@ -618,7 +618,7 @@ <h3 class="text-lg mt-2" id="author-gd1">
                                     <span>-30</span>
                                 </div>
                                 <div
-                                    class="ctrl-button ctrl-button-large"
+                                    class="ctrl-button ctrl-button-large d-flex justify-center"
                                     id="ctrl-play"
                                 >
                                     <i class="bi bi-play-fill"></i>
@@ -643,16 +643,16 @@ <h3 class="text-lg mt-2" id="author-gd1">
 
             <!-- Book buttons navigations -->
             <section
-                class="row d-flex align-items-stretch rounded-5 p-5 my-5 gx-5 text-center"
+                class="d-flex justify-content-evenly align-items-stretch rounded-5 p-4 my-5 gx-5 text-center"
             >
-                <div class="col-md-6">
+                <div class="flex-item w-auto" style="min-width: 150px;">
                     <a
                         href="./index.html"
                         class="text-gray-300 hover:text-green-500 border p-3 d-block rounded-start-5"
                         >Previous Book</a
                     >
                 </div>
-                <div class="col-md-6">
+                <div class="flex-item w-auto" style="min-width: 150px;">
                     <a
                         href="./pbd.html"
                         class="text-gray-300 hover:text-green-500 p-3 border d-block rounded-end-5"
diff --git a/style.css b/style.css
index fb1626b..86cb946 100644
--- a/style.css
+++ b/style.css
@@ -629,3 +629,40 @@ input[type="range"]#seekSlider:hover::-ms-thumb {
 .light-theme #sun-icon {
   display: none; /* Hide sun icon in light theme */
 }
+
+.flex-item {
+  flex: 1;
+  margin: 0 20px;
+  max-width: 550px;
+}
+
+/* Responsive for extra small devices (max-width: 480px) */
+@media (max-width: 480px) {
+  .ctrl-player .ctrl-buttons {
+    padding: 0px; 
+  }
+
+  .ctrl-player .ctrl-buttons .ctrl-button-small {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .ctrl-player .ctrl-buttons .ctrl-button-medium {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 0.8rem;
+  }
+
+  .ctrl-player .ctrl-buttons .ctrl-button-large {
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    font-size: 1.8rem;
+  }
+
+  .ctrl-button-large .bi {
+    font-size: 1.5rem;
+  }
+}
\ No newline at end of file