diff --git a/static/css/main.css b/static/css/main.css
index 2953a59..9028d7c 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2863,56 +2863,71 @@ html {
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
 }
 
-/* Mobile adjustments - Horizontal button layout at bottom center */
+/* Mobile adjustments - Flexbox button layout at bottom center */
 @media (max-width: 900px) {
-    /* Hide zoom and shortcuts buttons on mobile - only show PDF, Print, Info */
+    /* Hide only zoom control on mobile */
     .zoom-toggle-btn,
-    .shortcuts-btn {
+    .zoom-control {
         display: none !important;
     }
 
-    /* Position buttons horizontally at bottom center */
-    .download-btn {
+    /* Reset fixed positioning for all buttons on mobile */
+    .download-btn,
+    .print-friendly-btn,
+    .shortcuts-btn,
+    .info-button,
+    .back-to-top {
+        position: fixed !important;
         bottom: 1.5rem !important;
-        left: 50% !important;
-        transform: translateX(calc(-50% - 70px)) !important; /* Left button: center - 70px */
-        width: 45px;
-        height: 45px;
+        left: auto !important;
+        right: auto !important;
+        width: 50px !important;
+        height: 50px !important;
+        opacity: 0.7 !important;
+        transform: none !important;
     }
 
-    .download-btn:hover,
-    .download-btn.pdf-hover-sync {
-        transform: translateX(calc(-50% - 70px)) translateY(-3px) !important;
+    /* Flexbox container behavior - buttons arrange themselves */
+    /* Buttons will be positioned using JavaScript or individual positioning */
+    /* For now, use fixed spacing from center */
+
+    /* 4 buttons: Download, Print, Shortcuts, Info */
+    /* Spacing: 10px gap between buttons, centered horizontally */
+    /* Total width: 4 * 50px + 3 * 10px = 230px */
+    /* Start position: 50% - 115px */
+
+    .download-btn {
+        left: calc(50% - 115px) !important; /* First button: center - (230px/2) */
     }
 
     .print-friendly-btn {
-        bottom: 1.5rem !important;
-        left: 50% !important;
-        transform: translateX(-50%) !important; /* Center button */
-        width: 45px;
-        height: 45px;
+        left: calc(50% - 55px) !important; /* Second button: center - (230px/2) + 50px + 10px */
     }
 
-    .print-friendly-btn:hover,
-    .print-friendly-btn.print-hover-sync {
-        transform: translateX(-50%) translateY(-3px) !important;
+    .shortcuts-btn {
+        left: calc(50% + 5px) !important; /* Third button: center - (230px/2) + 110px + 20px */
     }
 
     .info-button {
-        bottom: 1.5rem !important;
-        left: 50% !important;
-        transform: translateX(calc(-50% + 70px)) !important; /* Right button: center + 70px */
-        width: 45px;
-        height: 45px;
+        left: calc(50% + 65px) !important; /* Fourth button: center - (230px/2) + 170px + 30px */
     }
 
-    .info-button:hover,
-    .info-button.at-bottom {
-        transform: translateX(calc(-50% + 70px)) translateY(-3px) !important;
+    /* Hover effects - only Y transform */
+    .download-btn:hover,
+    .download-btn.pdf-hover-sync,
+    .print-friendly-btn:hover,
+    .print-friendly-btn.print-hover-sync,
+    .shortcuts-btn:hover,
+    .info-button:hover {
+        transform: translateY(-3px) !important;
+        opacity: 1 !important;
     }
 
-    .info-button.at-bottom {
-        transform: translateX(calc(-50% + 70px)) !important; /* No Y offset for at-bottom state */
+    /* Keep at-bottom state without transform */
+    .info-button.at-bottom,
+    .shortcuts-btn.at-bottom {
+        opacity: 1 !important;
+        transform: none !important;
     }
 }