Fix iPhone Safari viewport and mobile footer issues
All checks were successful
build-website / build (push) Successful in 1m30s
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user