/* ============================================================================ child-feed-fit.css -- 2026-09-09 Stop Scroll-view (Social) FEED post cards from overflowing sideways on a phone. Loaded from inc/bundle-main-header-whiteLayout-css.inc (the FEED's ) when G_FEATURE_CHILD_FEED_FIT is True AND IsthisChildWebsite="1" AND the host is not a *.life site -- i.e. AYS / ProMover / plumbers etc., never storeboard.com. --------------------------------------------------------------------------- THE DEFECT (measured live on plumbersatyourservice.com; a 375px phone renders at a 625px LAYOUT viewport via the inner-page initial-scale=0.6 meta) --------------------------------------------------------------------------- Scroll view renders each post inside table.board-list-wrp as an unclassed nested with table-layout:auto. Auto layout grows a table to its content's min-content width, so a post's media block plus its header row (business name + category pills + location badge, laid out display:flex with NO flex-wrap) pushed the card to ~699px inside a 603px column -- ~96px past the viewport, then clipped by .board-list-wrp overflow-x:hidden. That clip reads as content jammed to the left with an empty band on the right. mobile-inner-fit.css (2026-08-17) forced table-layout:fixed on the OUTER .body-content-table shell, but not on these INNER per-post tables, and nothing wrapped the flex header row -- so the feed still overflowed. --------------------------------------------------------------------------- THE FIX --------------------------------------------------------------------------- Force the inner post tables to honour width:100% (fixed layout -- every feed table is single-column, verified live, so there is no column to squish), let long unbroken strings wrap, and let the post-header flex rows wrap instead of overflowing. Verified live: widest card 699 -> 581px, board content max-right 721 -> 613px, 0px overflow. Scoped to max-width:767px (phones) and to .board-list-wrp (Scroll view) so 768px+ and the grid/thumb/wide views are byte-identical to today. Rollback: G_FEATURE_CHILD_FEED_FIT = False in inc/global.asp AND inc/universal.asp (both roots), or ?feedfit=0 for a single request. ============================================================================ */ @media only screen and (max-width:767px){ /* Inner per-post tables: auto layout ignores the width:100% cap and grows to min-content. Fixed layout makes width:100% stick; single-column tables mean the one column simply becomes 100%. */ .board-list-wrp table{ table-layout:fixed !important; max-width:100% !important; } .board-list-wrp table td{ word-wrap:break-word !important; overflow-wrap:break-word !important; } /* Post-header rows (name + category pills + location badge) are non-wrapping flex rows authored for the ~700px desktop feed column. Let them wrap. */ .board-list-wrp .flex-containerDataNew{ flex-wrap:wrap !important; min-width:0 !important; } .board-list-wrp .sb-storecats{ flex-wrap:wrap !important; min-width:0 !important; } }