Merge pull request #125 from solanki03/audioBtn-fix

Fixed: Misaligned Audio Player Controls and Inconsistent Left Alignment #117
Ctoic · Oct 25, 2024 · 40890f1 · 40890f1
2 parents e477c04 + d333ff4
commit 40890f1
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 49 deletions.
diff --git a/index.html b/index.html
@@ -646,51 +646,69 @@ <h3 class="text-lg mt-2" id="author-gd1">By Richard Dawkins</h3>
               </div>
             </div>
 
-            <!-- Audio Players Controls Buttons -->
-            <div class="ctrl-player mt-4 px-5 mx-auto" id="ctrl-player">
-              <div
-                class="ctrl-buttons d-flex justify-content-evenly align-items-center"
-              >
-                <div class="ctrl-button ctrl-button-small" id="volume-down">
-                  <i class="bi bi-volume-down-fill"></i>
-                </div>
-                <div class="ctrl-button ctrl-button-medium" id="fast-backward">
-                  <span>-30</span>
+                        <!-- Audio Players Controls Buttons -->
+                        <div
+                            class="ctrl-player mt-4 mx-auto"
+                            id="ctrl-player"
+                        >
+                            <div
+                                class="ctrl-buttons d-flex justify-content-evenly align-items-center"
+                            >
+                                <div
+                                    class="ctrl-button ctrl-button-small"
+                                    id="volume-down"
+                                >
+                                    <i class="bi bi-volume-down-fill"></i>
+                                </div>
+                                <div
+                                    class="ctrl-button ctrl-button-medium"
+                                    id="fast-backward"
+                                >
+                                    <span>-30</span>
+                                </div>
+                                <div
+                                    class="ctrl-button ctrl-button-large d-flex justify-center"
+                                    id="ctrl-play"
+                                >
+                                    <i class="bi bi-play-fill"></i>
+                                </div>
+                                <div
+                                    class="ctrl-button ctrl-button-medium"
+                                    id="fast-forward"
+                                >
+                                    <span>+30</span>
+                                </div>
+                                <div
+                                    class="ctrl-button ctrl-button-small"
+                                    id="volume-up"
+                                >
+                                    <i class="bi bi-volume-up-fill"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div class="ctrl-button ctrl-button-large" id="ctrl-play">
-                  <i class="bi bi-play-fill"></i>
-                </div>
-                <div class="ctrl-button ctrl-button-medium" id="fast-forward">
-                  <span>+30</span>
+            </section>
+
+            <!-- Book buttons navigations -->
+            <section
+                class="d-flex justify-content-evenly align-items-stretch rounded-5 p-4 my-5 gx-5 text-center"
+            >
+                <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="ctrl-button ctrl-button-small" id="volume-up">
-                  <i class="bi bi-volume-up-fill"></i>
+                <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"
+                        >Next Book</a
+                    >
                 </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Book buttons navigations -->
-      <section
-        class="row d-flex align-items-stretch rounded-5 p-5 my-5 gx-5 text-center"
-      >
-        <div class="col-md-6">
-          <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">
-          <a
-            href="./pbd.html"
-            class="text-gray-300 hover:text-green-500 p-3 border d-block rounded-end-5"
-            >Next Book</a
-          >
-        </div>
-      </section>
+            </section>
 
       <section class="row rounded-5 p-5 mt-5">
         <!-- Comments Section -->

diff --git a/style.css b/style.css
@@ -1022,14 +1022,44 @@ header .container {
 .nav-item:hover {
   background-color: inherit;
 }
-/* auto-type contributors */
-#auto-type-title {
-  font-size: 3.111rem; /* Adjust as needed */
-  color: #333; /* Adjust color as needed */
-  height: 2.5rem; /* Set a fixed height, adjust based on font size */
-  overflow: hidden; /* Prevent overflow */
-  line-height: 2.5rem; /* Center text vertically */
+
+.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;
+  }
+}
+
 /* Contact Section */
 h2.display-5 {
   font-size: 2.5rem;