A Million Little Pieces Of My Mind

Changes for March 26, 2026

By: Paul S Cilwa Posted: 3/26/2026 Page Views: 27
Mobile CSS overflow fixes: NavBar containment, HorizontalScroll responsive sizing, form viewport constraints, header scaling for small screens.
Estimated reading time: 2 minute(s) (359 words)

Mobile CSS Overflow Resolution

The website's child pages were rendering too wide on mobile devices (375px viewport). Root causes were identified using automated Playwright testing and fixed across four CSS files: navigation buttons were unconstrained, the TimeRibbon horizontal-scroll container exceeded viewport limits, and the page form lacked mobile containment. All child pages now render correctly on mobile phones.

Navigation Bar Mobile Sizing

The nav.NavBar navigation buttons (Next, Up, Previous, Home) were rendering at desktop widths, causing horizontal overflow on mobile pages. Fixed in 30.Navigation.css:

  • Buttons shrink from 55px to 45px width on phones (max-width: 640px)
  • Button icons shrink from 40px to 32px
  • NavBar now allows flex-wrap so buttons can flow to multiple rows if needed
  • Font size reduced to 7pt for button text

TimeRibbon HorizontalScroll Container

The div.HorizontalScroll wrapper (used on pages like "About Me" with timeline tables) was hardcoded to max-width: 770px, which exceeded the 375px mobile viewport. Fixed in 70.TimeRibbon.css:

  • Mobile media query (max-width: 640px) constrains to max-width: 100%
  • Timeline tables remain horizontally scrollable but stay within viewport bounds

Form and Body Viewport Containment

The page form, body, and layout containers (#Middle, main) had no mobile constraints, allowing child elements to push content beyond the viewport. Added to 10.Layout.css:

  • max-width: 100% and overflow-x: hidden on all major layout containers
  • Body padding reduced to 6px on mobile (from 12px)
  • Prevents any overflowing content from becoming horizontally scrollable

Header Title Mobile Scaling

The site title ("A Million Little Pieces Of My Mind") in the header was also constrained. Updated in 20.Header.css:

  • Header h1 font-size reduced to 60% on mobile
  • max-width: 90% with word-wrap enabled
  • Allows title to flow naturally on small screens

Testing Approach

An automated Playwright script was set up in the mobile-testing/ folder to detect viewport overflow issues systematically. The script:

  • Tests child pages at 375px width (standard mobile viewport)
  • Identifies elements extending beyond the viewport
  • Reports the exact overflow amount and CSS values
  • Can be re-run anytime to check for regressions

This approach eliminated guesswork and pinpointed the exact root causes in minutes.