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>
