Fix iPhone Safari viewport and mobile footer issues
All checks were successful
build-website / build (push) Successful in 1m30s

Hero Section Viewport Fix:
- Changed body from min-height to height:100% for proper iOS inheritance
- Updated layout wrapper from min-h-screen to h-full
- Created app.vue with explicit height wrapper for Nuxt root
- Maintains complete height inheritance chain: html > body > #__nuxt > layout

Mobile Footer Fix:
- Fixed CSS conflict: removed grid-template-columns from flex container
- Added proper flex column layout for mobile stacking
- Removed margin-left:auto that was causing horizontal overflow
- Added word-wrap and padding for proper text wrapping
- Centered all footer content on mobile devices

These changes ensure the hero section fills the entire iPhone Safari viewport
including the URL bar area, and the footer displays correctly without cutoff.
This commit is contained in:
2025-09-19 11:02:46 +02:00
parent ae3aefd41b
commit 31bc2604b8
4 changed files with 47 additions and 4 deletions

View File

@@ -1839,10 +1839,31 @@ html {
}
.footer-content {
grid-template-columns: 1fr;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
text-align: center;
}
.footer-brand {
max-width: 100%;
margin: 0;
}
.footer-contact {
margin-left: 0;
width: 100%;
text-align: center;
}
.footer-contact p,
.footer-brand p {
word-wrap: break-word;
overflow-wrap: break-word;
padding: 0 1rem;
}
/* Fix booking cards for mobile */
.booking-options {
grid-template-columns: 1fr;