fix: smaller padding on mobile

Author: ringoldsdev

src/pages/test.astro

@@ -55,8 +55,8 @@ import "../styles/global.css";
         </div>
 
         <!-- Navigation Bar with transparent background -->
-        <div class="relative z-10 flex justify-center text-white px-8 sm:px-20">
-            <nav class="flex justify-between items-center pt-6 w-full max-w-screen-md">
+        <div class="relative z-10 flex justify-center text-white px-6 sm:px-20">
+            <nav class="flex justify-between items-center pt-5 w-full max-w-screen-md">
                 <div class="text-2xl font-bold">LOGO</div>
 
                 <!-- Desktop Navigation -->
@@ -79,7 +79,7 @@ import "../styles/global.css";
         </div>
 
         <!-- Headline with same padding as content -->
-        <div class="relative z-10 text-white max-w-screen-md mx-auto px-8 sm:px-20">
+        <div class="relative z-10 text-white max-w-screen-md mx-auto px-6 sm:px-20">
             <div class="py-15 sm:py-20 max-w-[70%] sm:max-w-[80%]">
                 <h1 class="text-3xl sm:text-4xl lg:text-6xl font-bold font-display leading-tight">
                     Some blog entry headline that's quite long
@@ -94,7 +94,7 @@ import "../styles/global.css";
         x-show="mobileMenuOpen" 
         class="fixed inset-0 bg-black z-50"
     >
-        <div class="px-8 sm:px-20 max-w-screen-md mx-auto">
+        <div class="px-6 sm:px-20 max-w-screen-md mx-auto">
             <!-- Mobile Menu Header with Close Button -->
             <div class="flex justify-between items-center py-6">
                 <div class="text-2xl font-bold text-white">LOGO</div>
@@ -111,15 +111,15 @@ import "../styles/global.css";
         </div>
 
         <!-- Mobile Menu Links -->
-        <div class="flex flex-col items-center justify-center h-[80vh] space-y-8 text-xl">
+        <div class="flex flex-col items-center justify-center h-[80vh] space-y-6 text-xl">
             <a href="#" class="text-white hover:text-gray-300" @click="mobileMenuOpen = false">Link 1</a>
             <a href="#" class="text-white hover:text-gray-300" @click="mobileMenuOpen = false">Link 2</a>
             <a href="#" class="text-white hover:text-gray-300" @click="mobileMenuOpen = false">Link 3</a>
         </div>
     </div>
 
     <!-- Content Box with responsive padding -->
-    <div class="max-w-screen-md mx-auto bg-white text-black p-8 sm:p-20 -mt-5 sm:-mt-40 relative z-10">
+    <div class="max-w-screen-md mx-auto bg-white text-black p-6 sm:p-20 -mt-5 sm:-mt-40 relative z-10">
         <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
 
         <p class="mb-6">Ut aliquam sollicitudin iaculis. Praesent ac semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus eget tempor dolor.</p>
@@ -145,8 +145,8 @@ import "../styles/global.css";
     </div>
 
     <!-- Black Footer with smaller navigation (always visible) -->
-    <footer class="bg-black text-white py-10">
-        <div class="flex justify-center px-8 sm:px-20">
+    <footer class="bg-black text-white py-4 sm:py-10">
+        <div class="flex justify-center px-5 sm:px-20">
             <div class="flex justify-between items-center w-full max-w-screen-md">
                 <div class="text-lg font-bold">LOGO</div>
                 <div class="flex space-x-4 sm:space-x-6 text-xs sm:text-sm">