From 1211b676425c8ec900e636fa20cff19046f1e072 Mon Sep 17 00:00:00 2001 From: matt Date: Fri, 19 Sep 2025 01:23:20 +0200 Subject: [PATCH] Improve mobile responsiveness across all sections MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Increase hero content size for better mobile visibility - Expand buttons and touch targets to recommended sizes - Fix section padding and container widths for mobile - Ensure all cards and grids use full width on mobile - Update typography scaling for better readability - Set proper viewport base font size (16px) - Add comprehensive mobile layout fixes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- apps/website/assets/css/main.css | 58 ++++++++++++--- apps/website/assets/css/voyage-layout.css | 90 ++++++++++++++++++----- 2 files changed, 119 insertions(+), 29 deletions(-) diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css index 766876e..40eb73a 100644 --- a/apps/website/assets/css/main.css +++ b/apps/website/assets/css/main.css @@ -239,21 +239,26 @@ body { @media (max-width: 768px) { .hero-logo img { height: auto; - max-height: 150px; - width: 90%; - max-width: 280px; - margin: 20px auto; + width: 85%; + max-width: 340px; + max-height: 200px; + margin: 0 auto; } - /* Reduce hero padding on mobile */ + /* Proper hero sizing on mobile */ .hero-content { - padding: 1rem; + padding: 20px; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; } - /* Ensure touch targets are at least 44x44px */ + /* Ensure touch targets are at least 48px for better mobile UX */ button, .btn-primary-warm, .btn-secondary-warm { - min-height: 44px; - min-width: 44px; + min-height: 48px; + min-width: 48px; } } @@ -310,12 +315,26 @@ body { /* Section Styles */ .section-title { - @apply text-4xl md:text-5xl lg:text-6xl font-serif font-bold text-harbor-navy; + @apply text-3xl md:text-5xl lg:text-6xl font-serif font-bold text-harbor-navy; @apply mb-4; } .section-subtitle { - @apply text-xl md:text-2xl text-gray-600 mb-12; + @apply text-lg md:text-2xl text-gray-600 mb-8 md:mb-12; + } + + @media (max-width: 768px) { + .section-title { + font-size: 1.875rem; + line-height: 1.2; + padding: 0 10px; + } + + .section-subtitle { + font-size: 1rem; + line-height: 1.4; + padding: 0 10px; + } } } @@ -450,7 +469,22 @@ body { /* Responsive Typography Scale */ @media (max-width: 768px) { html { - font-size: 14px; + font-size: 16px; /* Keep base font size for readability */ + } + + body { + width: 100%; + overflow-x: hidden; + } + + /* Ensure all containers use full width */ + .container, + .content-wrapper, + main { + width: 100%; + max-width: 100%; + padding: 0; + margin: 0; } } diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css index 29c5ee5..3588a81 100644 --- a/apps/website/assets/css/voyage-layout.css +++ b/apps/website/assets/css/voyage-layout.css @@ -1663,13 +1663,19 @@ html { /* Responsive */ @media (max-width: 768px) { .hero-voyage { - padding: 60px 15px; + padding: 0; min-height: 100vh; + height: 100vh; } .hero-content { - padding: 0 15px; + padding: 15px; overflow-x: hidden; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } /* Responsive logo */ @@ -1681,10 +1687,10 @@ html { .hero-logo img { height: auto; - max-height: 150px; - width: 100%; - max-width: 280px; - margin: 20px auto; + width: 90%; + max-width: 340px; + max-height: 200px; + margin: 0 auto; object-fit: contain; } @@ -1696,32 +1702,34 @@ html { } .hero-subtext { - font-size: 0.95rem; + font-size: 1rem; padding: 0 10px; - margin-bottom: 1.5rem; - line-height: 1.6; + margin-bottom: 2rem; + line-height: 1.5; + text-align: center; } .hero-actions { flex-direction: column; width: 100%; - padding: 0; - gap: 0.75rem; + padding: 0 15px; + gap: 12px; align-items: center; } /* Smaller buttons on mobile */ .btn-primary-warm, .btn-secondary-warm { - width: 85%; - max-width: 260px; - padding: 0.65rem 1rem; - font-size: 0.875rem; + width: 100%; + max-width: 340px; + padding: 14px 24px; + font-size: 1rem; display: flex; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; + min-height: 50px; } .btn-primary-warm .btn-icon, @@ -1742,18 +1750,66 @@ html { display: none; } + /* Fix all section padding for mobile */ + section { + padding: 40px 15px !important; + } + + .welcome-section, + .services-section, + .experience-stories, + .portfolio-gallery, + .booking-cta { + padding: 40px 15px !important; + } + .welcome-content { grid-template-columns: 1fr; + padding: 0; } - + + .service-card { + width: 100%; + padding: 20px; + } + + .services-grid { + grid-template-columns: 1fr; + gap: 20px; + padding: 0; + } + .yacht-card { grid-template-columns: 1fr; } - + .footer-content { grid-template-columns: 1fr; text-align: center; } + + /* Fix booking cards for mobile */ + .booking-options { + grid-template-columns: 1fr; + padding: 0; + } + + .booking-card { + width: 100%; + padding: 20px; + } + + /* Fix testimonial cards */ + .testimonials-grid { + grid-template-columns: 1fr; + gap: 20px; + padding: 0; + } + + .testimonial-card { + width: 100%; + padding: 20px; + } .social-links { justify-content: center;