feat: add comprehensive mobile responsive CSS
WHAT WAS DONE: Created mobile-responsive.css with fixes for all mobile layout issues observed in testing on actual mobile device. MOBILE FIXES (up to 768px): - All 2-column and 3-column grids stack vertically - Font sizes reduced (h1: 2.5rem, h2: 2rem, h3: 1.5rem) - Excessive padding reduced (100px → 40px, 80px → 40px, etc.) - Footer columns stack vertically instead of side-by-side overflow - Fire/Frost path cards stack on mobile - Why Firefrost cards (Security/Community/Legacy) stack - Buttons sized appropriately for mobile (15px 30px) - Images constrained to 100% width - Horizontal overflow prevented TABLET FIXES (769px - 1024px): - 3-column grids become 2-column - Moderate padding reduction - Font size optimization INTEGRATION: - Added to head.njk so it applies to all pages site-wide - Uses media queries with !important to override inline styles - Targets specific style patterns from our inline-styled pages TESTING: Based on actual mobile screenshots showing: - Fire/Frost cards cutting off (Image 4) - Why Firefrost cards side-overflow (Image 3) - Footer 3-column overflow (Images 1-2) STATUS: Ready for mobile testing after deploy Signed-off-by: Claude (Chronicler #56) <claude@firefrostgaming.com>
This commit is contained in:
Claude (Chronicler #56)
@@ -4,6 +4,7 @@
|
||||
<title>{{ title }} | Firefrost Gaming</title>
|
||||
<meta name="description" content="{{ description }}">
|
||||
<link rel="stylesheet" href="/src/css/firefrost.css">
|
||||
<link rel="stylesheet" href="/src/css/mobile-responsive.css">
|
||||
|
||||
<!-- Fire/Frost/Arcane Brand Colors -->
|
||||
<style>
|
||||
|
||||
182
src/css/mobile-responsive.css
Normal file
182
src/css/mobile-responsive.css
Normal file
@@ -0,0 +1,182 @@
|
||||
/* FIREFROST GAMING - MOBILE RESPONSIVE FIXES */
|
||||
/* Fixes for 11ty static site - mobile and tablet breakpoints */
|
||||
|
||||
/* ========================================
|
||||
MOBILE (up to 768px)
|
||||
======================================== */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* Prevent horizontal overflow */
|
||||
body {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
/* Hero sections - reduce font sizes */
|
||||
h1 {
|
||||
font-size: 2.5rem !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
/* Paragraphs with large inline font sizes */
|
||||
p[style*="font-size: 3.5em"],
|
||||
p[style*="font-size: 3em"] {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
p[style*="font-size: 2.5em"],
|
||||
p[style*="font-size: 2.2em"],
|
||||
p[style*="font-size: 2em"] {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
p[style*="font-size: 1.8em"],
|
||||
p[style*="font-size: 1.6em"],
|
||||
p[style*="font-size: 1.5em"] {
|
||||
font-size: 1.2rem !important;
|
||||
}
|
||||
|
||||
p[style*="font-size: 1.3em"],
|
||||
p[style*="font-size: 1.2em"] {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
/* All grid layouts - stack vertically on mobile */
|
||||
div[style*="grid-template-columns: repeat(2"],
|
||||
div[style*="grid-template-columns: repeat(3"],
|
||||
div[style*="grid-template-columns: repeat(auto-fit"] {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 25px !important;
|
||||
}
|
||||
|
||||
/* Reduce excessive padding on mobile */
|
||||
div[style*="padding: 100px"],
|
||||
div[style*="padding: 80px"] {
|
||||
padding: 40px 20px !important;
|
||||
}
|
||||
|
||||
div[style*="padding: 60px"] {
|
||||
padding: 30px 20px !important;
|
||||
}
|
||||
|
||||
div[style*="padding: 50px"],
|
||||
div[style*="padding: 40px"] {
|
||||
padding: 25px 20px !important;
|
||||
}
|
||||
|
||||
div[style*="padding: 35px"] {
|
||||
padding: 20px 15px !important;
|
||||
}
|
||||
|
||||
/* Images - ensure they don't overflow */
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Buttons and links - better mobile sizing */
|
||||
a[style*="padding: 25px"],
|
||||
a[style*="padding: 22px"],
|
||||
a[style*="padding: 20px"],
|
||||
a[style*="padding: 18px"] {
|
||||
padding: 15px 30px !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
/* Button containers - stack vertically */
|
||||
div[style*="display: flex"][style*="gap: 25px"],
|
||||
div[style*="display: flex"][style*="gap: 30px"] {
|
||||
flex-direction: column !important;
|
||||
gap: 15px !important;
|
||||
}
|
||||
|
||||
/* Footer - stack columns vertically */
|
||||
footer div[style*="grid-template-columns"] {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 40px !important;
|
||||
}
|
||||
|
||||
/* Ensure max-width containers don't cause overflow */
|
||||
div[style*="max-width: 1600px"],
|
||||
div[style*="max-width: 1400px"],
|
||||
div[style*="max-width: 1200px"],
|
||||
div[style*="max-width: 900px"],
|
||||
div[style*="max-width: 800px"] {
|
||||
max-width: 100% !important;
|
||||
margin-left: 10px !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
/* Lists inside cards */
|
||||
ul {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
/* Cards with position absolute decorative elements */
|
||||
div[style*="position: absolute"][style*="font-size: 15rem"] {
|
||||
font-size: 8rem !important;
|
||||
}
|
||||
|
||||
/* Subscribe page - Trinity image */
|
||||
div[style*="text-align: center"] > img {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* Announcement banner - adjust text size */
|
||||
header div[style*="background: linear-gradient"][style*="padding: 12px"] {
|
||||
font-size: 0.85rem !important;
|
||||
padding: 10px 15px !important;
|
||||
}
|
||||
|
||||
/* Nav bar - adjust for mobile */
|
||||
nav div[style*="display: flex"][style*="gap: 35px"] {
|
||||
gap: 20px !important;
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
/* Subscribe buttons in tier cards */
|
||||
a[style*="padding: 15px 40px"] {
|
||||
padding: 12px 30px !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
/* Sovereign tier badge */
|
||||
div[style*="position: absolute"][style*="top: 20px"][style*="right: 20px"] {
|
||||
position: static !important;
|
||||
display: inline-block !important;
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
TABLET (769px - 1024px)
|
||||
======================================== */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
|
||||
h1 {
|
||||
font-size: 3rem !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem !important;
|
||||
}
|
||||
|
||||
/* Reduce padding on medium screens */
|
||||
div[style*="padding: 100px"],
|
||||
div[style*="padding: 80px"] {
|
||||
padding: 60px 30px !important;
|
||||
}
|
||||
|
||||
/* Two-column grids on tablet */
|
||||
div[style*="grid-template-columns: repeat(3"] {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user