fix: dynamic page height on zoom and footer spacing improvements
Fixed two issues with zoom and footer: 1. Dynamic height adjustment based on zoom level: - Store original height on first zoom (dataset.originalHeight) - Calculate scaled height: originalHeight × scale factor - Set container height dynamically to match visual content - Example: 50% zoom → height = originalHeight × 0.5 - Prevents empty space below content at low zoom - Prevents overflow at high zoom 2. Footer spacing and positioning: - Reduced .cv-main bottom padding: 3rem → 1rem - Added .cv-footer margin-top: -60px to pull footer up - Increased .zoom-control bottom: 70px → 100px - Zoom control now clears footer GitHub link Result: - Footer appears immediately after content at any zoom level - No wasted empty space below content - Zoom control doesn't overlap GitHub link - Page height dynamically adapts to zoom level
This commit is contained in:
+3
-2
@@ -733,7 +733,7 @@ iconify-icon {
|
||||
/* Main Content - Right column */
|
||||
.cv-main {
|
||||
background: var(--paper-white);
|
||||
padding: 3rem 2.5rem;
|
||||
padding: 3rem 2.5rem 1rem 2.5rem; /* Reduced bottom padding to minimize footer space */
|
||||
}
|
||||
|
||||
/* Professional Title Badges - Spans Both Columns */
|
||||
@@ -1696,6 +1696,7 @@ a:focus {
|
||||
color: #ccc;
|
||||
padding: 20px 0;
|
||||
margin: 0;
|
||||
margin-top: -60px; /* Move footer up to reduce space and clear zoom control */
|
||||
grid-column: 1 / -1; /* Span all columns */
|
||||
}
|
||||
|
||||
@@ -3468,7 +3469,7 @@ html {
|
||||
|
||||
.zoom-control {
|
||||
position: fixed;
|
||||
bottom: 70px;
|
||||
bottom: 100px; /* Increased from 70px to clear footer */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 900;
|
||||
|
||||
Reference in New Issue
Block a user