txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Complete mobile UX overhaul - horizontal scroll, landscape mode, and centering

Browse Source 
Fixes three critical mobile issues across Android and iPhone:

1. HORIZONTAL SCROLL ELIMINATION (CRITICAL)
   - Added overflow-x: hidden to html and body globally
   - Landscape: Aggressive max-width: 100vw on all containers
   - Fixed .cv-page, .cv-container overflow issues
   - Prevented scale transform from causing overflow

2. LANDSCAPE MODE COMPLETE FIX
   - Single column layout enforced (grid-template-columns: 1fr)
   - Photo visible and sized appropriately (max-width: 120px)
   - Hamburger menu visible and accessible
   - Action bar simplified (center controls hidden)
   - Language selector compact
   - Smaller buttons (40px) with recalculated positions
   - Typography reduced for better fit

3. BUTTON CENTERING (VERIFIED WORKING)
   - Confirmed perfect centering in portrait mode
   - Android: 290px bar centered at viewport center (188px)
   - iPhone: Identical centering behavior
   - Landscape: 240px bar for 5 buttons (40px each)

Files modified:
- static/css/01-foundation/_reset.css - Global overflow-x fix
- static/css/05-responsive/_breakpoints.css - Comprehensive landscape overhaul
- tests/mjs/54-landscape-mode-test.mjs - Landscape validation (Android + iPhone)
- tests/mjs/55-button-centering-test.mjs - Button centering validation
- tests/mjs/56-landscape-debug-test.mjs - Media query debugging tool
- tests/mjs/57-horizontal-scroll-debug.mjs - Scroll width debugging tool

Test results:
✅ Portrait: Buttons perfectly centered (0px offset)
✅ Landscape: Single column, no horizontal scroll
✅ Hamburger visible and accessible in landscape
✅ Photo visible in all orientations
✅ Android + iPhone parity confirmed
This commit is contained in:
juanatsap
2025-11-25 05:09:05 +00:00
parent 2a5a11e78d
commit 639a99b8ea
6 changed files with 700 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/01-foundation/_reset.css
+4 -1
View File
@@ -25,13 +25,16 @@ body {
background-image: var(--page-bg-pattern);
background-size: 40px 40px; /* For dark theme diagonal grid */
background-attachment: fixed;
overflow-x: auto;
max-width: 100vw; /* Prevent horizontal overflow */
overflow-x: hidden; /* NO horizontal scroll on mobile */
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
scroll-padding-top: 70px; /* Account for fixed header */
max-width: 100vw; /* Prevent horizontal overflow */
overflow-x: hidden; /* NO horizontal scroll */
}
/* Ensure Iconify icons display properly */
static/css/05-responsive/_breakpoints.css
+248 -25
View File
@@ -697,15 +697,83 @@
}
/* ========================================
Landscape Orientation Fixes
Landscape Orientation Fixes (Mobile Devices)
======================================== */
@media (max-width: 915px) and (orientation: landscape) {
/* CRITICAL: Prevent horizontal scroll in landscape */
* {
max-width: 100vw !important;
}
html, body {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
.cv-container {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
.cv-page {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
transform: scale(1) !important; /* Reset zoom that might cause overflow */
box-shadow: none !important; /* Remove shadow that might cause overflow */
}
.page-content {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
/* Hide elements that might cause overflow */
.action-bar, .cv-header, .cv-sidebar, .cv-main {
max-width: 100% !important;
overflow-x: hidden !important;
}
/* Force single column layout in landscape mobile */
.cv-page .page-1 .page-content,
.cv-page .page-2 .page-content,
.page-1 .page-content,
.page-2 .page-content {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto;
grid-template-rows: auto auto !important;
max-width: 100% !important;
}
/* Stack elements vertically in landscape: sidebar -> main */
.page-1 .cv-sidebar-left {
grid-column: 1;
grid-row: 1;
order: 1;
}
.page-1 .cv-main {
grid-column: 1;
grid-row: 2;
order: 2;
}
/* Stack elements vertically in landscape: main -> sidebar */
.page-2 .cv-main {
grid-column: 1;
grid-row: 1;
order: 1;
}
.page-2 .cv-sidebar-right {
grid-column: 1;
grid-row: 2;
order: 2;
}
/* Reduce header size in landscape */
@@ -714,28 +782,120 @@
}
.cv-name {
font-size: 1.2rem !important;
font-size: 1.4rem !important;
text-align: center;
}
.years-experience {
font-size: 0.9em !important;
font-size: 1em !important;
text-align: center;
}
/* Reduce photo size in landscape to ~50% width but keep visible */
.cv-header-content {
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
/* Reduce photo size in landscape to 50% */
.cv-photo {
width: 50% !important;
position: static !important;
width: auto !important;
height: auto !important;
max-width: 80px !important;
max-width: 120px !important;
margin: 0.5rem auto !important;
text-align: center;
}
/* Compact action bar */
.cv-photo img {
width: 100% !important;
height: auto !important;
}
/* Compact action bar - keep hamburger menu visible */
.action-bar {
padding: 0.5rem 1rem !important;
padding: 0.5rem 0.75rem !important;
}
/* Simplify action bar for landscape */
.action-bar-content {
grid-template-columns: 1fr !important;
gap: 0;
padding: 0;
}
/* Hide center controls on landscape mobile (moved to hamburger menu) */
.view-controls-center {
display: none !important;
}
/* Hide action buttons on landscape (available in hamburger menu) */
.action-buttons-right {
display: none !important;
}
/* Keep site title visible and compact */
.site-title {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 0.5rem;
gap: 0.5rem;
}
.site-title-left {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1 1 auto;
min-width: 0;
}
.site-title-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.95rem !important;
}
/* Language selector compact */
.language-selector {
display: flex;
flex: 0 0 auto;
margin-left: auto;
gap: 0.25rem;
}
.language-selector .selector-btn {
padding: 0.3rem 0.6rem !important;
font-size: 0.85rem !important;
min-width: 35px !important;
}
/* Hide year from title in landscape mobile */
.site-title-year {
display: none !important;
}
/* Show mobile icon in title */
.site-logo-link {
display: none !important;
}
.site-icon-mobile {
display: inline-flex !important;
}
/* Reduce sidebar padding */
.cv-sidebar {
padding: 1rem !important;
padding: 0.75rem !important;
}
/* Compact accordion headers in landscape */
.sidebar-accordion summary.sidebar-accordion-header {
padding: 6px 12px !important;
font-size: 0.8em !important;
}
/* Compact sections */
@@ -749,34 +909,97 @@
.project-item,
.course-item {
margin-bottom: 1rem !important;
padding-bottom: 1rem !important;
}
/* Make hamburger menu more accessible in landscape */
.hamburger-menu {
position: fixed !important;
top: 10px !important;
left: 10px !important;
/* Reduce font sizes for landscape */
.experience-period,
.experience-location,
.position {
font-size: 0.85rem !important;
}
.short-desc,
.responsibilities li {
font-size: 0.8rem !important;
}
/* Make hamburger button accessible in landscape */
.hamburger-btn {
display: flex !important; /* Force visible */
position: relative !important;
z-index: 1001 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Adjust fixed buttons for landscape */
.fixed-btn {
bottom: 1rem !important;
/* Adjust bottom button bar for landscape - smaller buttons */
.download-btn,
.print-friendly-btn,
.shortcuts-btn,
.info-button,
.back-to-top,
.color-theme-switcher {
width: 40px !important;
height: 40px !important;
bottom: 1rem !important;
}
.back-to-top-btn {
right: 1rem !important;
/* Recalculate button positions for smaller 40px buttons */
/* 6 buttons: 6 * 40px + 5 * 10px = 290px total */
.download-btn {
left: calc(50% - 145px) !important;
}
.print-friendly-btn {
left: calc(50% - 95px) !important;
}
.shortcuts-btn {
left: 1rem !important;
bottom: 5rem !important;
left: calc(50% - 45px) !important;
}
.zoom-toggle-btn {
left: 1rem !important;
bottom: 9rem !important;
.color-theme-switcher {
left: calc(50% + 5px) !important;
}
.info-button {
left: calc(50% + 55px) !important;
}
.back-to-top {
left: calc(50% + 105px) !important;
}
/* Real mobile devices in landscape: 5 buttons (no shortcuts) */
/* 5 buttons: 5 * 40px + 4 * 10px = 240px total */
.is-mobile-device .download-btn {
left: calc(50% - 120px) !important;
}
.is-mobile-device .print-friendly-btn {
left: calc(50% - 70px) !important;
}
.is-mobile-device .color-theme-switcher {
left: calc(50% - 20px) !important;
}
.is-mobile-device .info-button {
left: calc(50% + 30px) !important;
}
.is-mobile-device .back-to-top {
left: calc(50% + 80px) !important;
}
/* Reduce blur bar height for landscape */
.fixed-buttons-backdrop {
height: 70px !important;
}
/* Add bottom padding to footer for landscape */
footer.no-print {
padding-bottom: 90px !important;
}
}