c65b1969c5
QUICK WIN - 5-MINUTE DEPLOYMENT, MAJOR UX IMPROVEMENT PROBLEM SOLVED: - Content cut off on right side of mobile screens ✅ FIXED - Text truncated/disappearing on phones ✅ FIXED - Horizontal overflow issues ✅ FIXED - Buttons and cards not mobile responsive ✅ FIXED SOLUTION: Merged mobile responsive CSS media queries with existing Ghost header injection code (navbar layout, typography, Fire/Frost branding). MOBILE FIXES DEPLOYED: - Responsive typography (5.5rem → 2.5rem headings on mobile) - Vertically stacked buttons on mobile - Full-width touch-friendly CTAs - Stacked Fire/Frost path cards - Reduced padding (80px → 40px on mobile) - Horizontal scroll prevention (overflow-x: hidden) - Tablet responsive adjustments (768px - 1024px) DEPLOYMENT METHOD: Ghost Admin → Settings → Code Injection → Site Header Complete code preserved in operations manual for future reference. TESTING: - Desktop (>1024px): ✅ Working - Tablet (768px-1024px): ✅ Working - Mobile (<768px): ✅ Working IMPACT: 40-60% of web traffic now has proper mobile experience. Soft launch blocker RESOLVED. FILES: - docs/core/tasks.md (Task #88 marked COMPLETE) - docs/planning/ideas/features/ghost-homepage-mobile-fix-DEPLOYED.html (complete merged CSS for future reference) DEPLOYMENT DATE: April 1, 2026 DEPLOYED BY: Chronicler #51 TIME INVESTMENT: 5 minutes (as predicted) BUSINESS VALUE: High (mobile UX critical for conversions) Quick wins for the win. 🎉📱 Signed-off-by: Claude (Chronicler #51) <claude@firefrostgaming.com>
344 lines
8.7 KiB
HTML
344 lines
8.7 KiB
HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* Gemini's Grid Fix - Force full-width spanning */
|
|
body.home-template .gh-canvas > * {
|
|
grid-column: 1 / -1 !important;
|
|
}
|
|
body.home-template .kg-card,
|
|
body.home-template .kg-html-card {
|
|
grid-column: 1 / -1 !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
body.home-template .kg-card {
|
|
transform: none !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
body.home-template .gh-canvas {
|
|
grid-template-columns: 1fr !important;
|
|
padding: 0 !important;
|
|
}
|
|
body.home-template .inner {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
padding: 0 !important;
|
|
}
|
|
html, body {
|
|
overflow-x: hidden !important;
|
|
max-width: 100% !important;
|
|
}
|
|
/* Custom Typography - Nuclear Option */
|
|
html body .ffg-custom-text h1 {
|
|
font-size: 5.5rem !important;
|
|
}
|
|
html body .ffg-custom-text h2 {
|
|
font-size: 4rem !important;
|
|
}
|
|
html body .ffg-custom-text h3 {
|
|
font-size: 2.5rem !important;
|
|
}
|
|
html body .ffg-custom-text h4 {
|
|
font-size: 1.8rem !important;
|
|
}
|
|
html body .ffg-custom-text p {
|
|
font-size: 1.35rem !important;
|
|
}
|
|
html body .ffg-custom-text li {
|
|
font-size: 1.2rem !important;
|
|
}
|
|
html body .ffg-custom-text a {
|
|
font-size: 1.3rem !important;
|
|
}
|
|
/* Hero section specific */
|
|
html body .ffg-hero h1 {
|
|
font-size: 5.5rem !important;
|
|
}
|
|
html body .ffg-hero .subtitle {
|
|
font-size: 2.5rem !important;
|
|
}
|
|
html body .ffg-hero .description {
|
|
font-size: 1.6rem !important;
|
|
}
|
|
html body .ffg-hero .cta-button {
|
|
font-size: 1.4rem !important;
|
|
}
|
|
/* Origin Story specific */
|
|
html body .ffg-origin .quote-large {
|
|
font-size: 2rem !important;
|
|
}
|
|
html body .ffg-origin .quote-medium {
|
|
font-size: 1.8rem !important;
|
|
}
|
|
/* Footer specific */
|
|
html body .ffg-footer h4 {
|
|
font-size: 1.8rem !important;
|
|
}
|
|
html body .ffg-footer a,
|
|
html body .ffg-footer p {
|
|
font-size: 1.15rem !important;
|
|
}
|
|
html body .ffg-footer .tagline {
|
|
font-size: 1.35rem !important;
|
|
}
|
|
html body .ffg-footer .copyright {
|
|
font-size: 1.15rem !important;
|
|
}
|
|
html body .ffg-footer .bottom-tagline {
|
|
font-size: 1.1rem !important;
|
|
}
|
|
|
|
/* ============================================
|
|
NAVBAR FIX - Logo Left, Links Center, Dark Background
|
|
============================================ */
|
|
|
|
/* Dark background for navbar */
|
|
#gh-navigation {
|
|
background-color: #1a1a1a !important;
|
|
border-bottom: 1px solid #333 !important;
|
|
}
|
|
|
|
/* Inner container - flexbox layout */
|
|
.gh-navigation-inner {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: space-between !important;
|
|
max-width: 1200px !important;
|
|
padding: 1rem 2rem !important;
|
|
}
|
|
|
|
/* Logo section on left */
|
|
.gh-navigation-brand {
|
|
order: 1 !important;
|
|
flex-shrink: 0 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 1rem !important;
|
|
}
|
|
|
|
.gh-navigation-logo img {
|
|
max-height: 40px !important;
|
|
}
|
|
|
|
.gh-navigation-logo {
|
|
color: #ffffff !important;
|
|
font-size: 1.5rem !important;
|
|
}
|
|
|
|
/* Hide burger menu on desktop */
|
|
.gh-burger {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Navigation menu in center */
|
|
.gh-navigation-menu {
|
|
order: 2 !important;
|
|
flex: 1 !important;
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
margin: 0 2rem !important;
|
|
}
|
|
|
|
.gh-navigation-menu nav,
|
|
.gh-navigation-menu ul {
|
|
display: flex !important;
|
|
gap: 2rem !important;
|
|
list-style: none !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.gh-navigation-menu a {
|
|
color: #ffffff !important;
|
|
font-weight: 500 !important;
|
|
text-decoration: none !important;
|
|
transition: color 0.2s ease !important;
|
|
}
|
|
|
|
.gh-navigation-menu a:hover {
|
|
color: #4ECDC4 !important;
|
|
}
|
|
|
|
/* Actions on right */
|
|
.gh-navigation-actions {
|
|
order: 3 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 1rem !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* Search icon */
|
|
.gh-navigation-actions .gh-search,
|
|
.gh-navigation-actions button.gh-search {
|
|
color: #ffffff !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
/* Members section - CRITICAL: Force display */
|
|
.gh-navigation-members {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 1rem !important;
|
|
}
|
|
|
|
/* Sign in link - Firefrost Custom */
|
|
.gh-navigation-members .ffg-signin-link {
|
|
display: inline-block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
color: #ffffff !important;
|
|
font-weight: 500 !important;
|
|
text-decoration: none !important;
|
|
margin-right: 0.5rem !important;
|
|
}
|
|
|
|
.gh-navigation-members .ffg-signin-link:hover {
|
|
color: #4ECDC4 !important;
|
|
}
|
|
|
|
/* Subscribe button - Fire/Frost gradient */
|
|
.gh-navigation-members .gh-button,
|
|
.gh-navigation-members > a.gh-button {
|
|
background: linear-gradient(135deg, #FF6B35 0%, #4ECDC4 100%) !important;
|
|
color: #ffffff !important;
|
|
padding: 0.5rem 1.5rem !important;
|
|
border-radius: 25px !important;
|
|
font-weight: 600 !important;
|
|
transition: transform 0.2s ease !important;
|
|
text-decoration: none !important;
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.gh-navigation-members .gh-button:hover,
|
|
.gh-navigation-members > a.gh-button:hover {
|
|
transform: translateY(-2px) !important;
|
|
box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
MOBILE RESPONSIVE FIXES - Task #88
|
|
Fixes content cut off on right side of mobile screens
|
|
============================================ */
|
|
|
|
/* Mobile fixes for homepage content */
|
|
@media (max-width: 768px) {
|
|
/* Navbar mobile */
|
|
.gh-burger {
|
|
display: block !important;
|
|
}
|
|
|
|
.gh-navigation-menu {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Force responsive typography on mobile */
|
|
html body .ffg-custom-text h1,
|
|
html body .ffg-hero h1 {
|
|
font-size: 2.5rem !important;
|
|
line-height: 1.2 !important;
|
|
}
|
|
|
|
html body .ffg-custom-text h2 {
|
|
font-size: 2rem !important;
|
|
}
|
|
|
|
html body .ffg-custom-text h3 {
|
|
font-size: 1.5rem !important;
|
|
}
|
|
|
|
html body .ffg-hero .subtitle {
|
|
font-size: 1.3rem !important;
|
|
}
|
|
|
|
html body .ffg-hero .description,
|
|
html body .ffg-custom-text p {
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
/* Button containers - stack vertically on mobile */
|
|
body.home-template div[style*="display: flex"] {
|
|
flex-direction: column !important;
|
|
gap: 15px !important;
|
|
}
|
|
|
|
/* Buttons - full width on mobile */
|
|
body.home-template a[style*="padding: 18px"],
|
|
body.home-template a[style*="padding: 15px"],
|
|
html body .ffg-hero .cta-button {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
text-align: center !important;
|
|
font-size: 1.1rem !important;
|
|
}
|
|
|
|
/* Path cards - stack vertically */
|
|
body.home-template div[style*="grid-template-columns"] {
|
|
grid-template-columns: 1fr !important;
|
|
gap: 25px !important;
|
|
}
|
|
|
|
/* Remove excessive padding on mobile */
|
|
body.home-template div[style*="padding: 80px"],
|
|
body.home-template div[style*="padding: 60px"] {
|
|
padding: 40px 20px !important;
|
|
}
|
|
|
|
body.home-template div[style*="padding: 40px"] {
|
|
padding: 25px 20px !important;
|
|
}
|
|
|
|
/* Images - ensure they don't overflow */
|
|
body.home-template img {
|
|
max-width: 100% !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
/* Lists inside cards */
|
|
body.home-template ul {
|
|
padding-left: 20px !important;
|
|
}
|
|
|
|
/* Extra safety - no horizontal scroll */
|
|
body.home-template .gh-viewport,
|
|
body.home-template .gh-main,
|
|
body.home-template .gh-page {
|
|
overflow-x: hidden !important;
|
|
max-width: 100vw !important;
|
|
}
|
|
|
|
/* Ensure content doesn't push off screen */
|
|
body.home-template .gh-content > * {
|
|
max-width: 100% !important;
|
|
padding-left: 15px !important;
|
|
padding-right: 15px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
}
|
|
|
|
/* Tablet responsive adjustments (768px - 1024px) */
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
html body .ffg-hero h1 {
|
|
font-size: 4rem !important;
|
|
}
|
|
|
|
html body .ffg-custom-text h2 {
|
|
font-size: 3rem !important;
|
|
}
|
|
|
|
html body .ffg-hero .subtitle {
|
|
font-size: 2rem !important;
|
|
}
|
|
|
|
/* Reduce padding on medium screens */
|
|
body.home-template div[style*="padding: 80px"] {
|
|
padding: 60px 30px !important;
|
|
}
|
|
}
|
|
</style>
|