/** * Plain-content pages — BugZap #220. * * Pages built from ACF blocks carry their own full-bleed section wrappers, so * page.php deliberately renders the content with no container of its own. A * page written in ordinary editor blocks — Privacy Policy, Terms of Service, * anything Christine writes from scratch — therefore had nothing constraining * it and ran the full viewport width: measured 0..1537px at innerWidth 1537. * * page.php adds `container smith-plain-page` to those pages only. `.container` * (from main.css) supplies the 1200px cap and the horizontal gutter; this file * adds the vertical rhythm, which a bare `.container` does not carry. * * Enqueued conditionally from smith_enqueue_assets() — see * smith_page_has_acf_blocks(). */ .smith-plain-page { padding-top: 72px; padding-bottom: 96px; } /* Comfortable measure for long-form legal copy — the 1200px container is a layout width, not a reading width. BugZap #225: `margin-inline: auto` is not optional. Without it the 800px measure sat hard against the left of the 1200px container, so anything the editor centred (the Thank You page) looked off-centre — measured at 1440, container 80..1360 but content 80..880. Centre the measure, not just the text inside it. */ .smith-plain-page > * { max-width: 800px; margin-inline: auto; } .smith-plain-page > * + * { margin-top: 1.25rem; } .smith-plain-page > *:first-child { margin-top: 0; } .smith-plain-page h1, .smith-plain-page h2, .smith-plain-page h3, .smith-plain-page h4 { margin-top: 2.5rem; margin-bottom: 0.75rem; } .smith-plain-page > h1:first-child, .smith-plain-page > h2:first-child, .smith-plain-page > h3:first-child { margin-top: 0; } .smith-plain-page ul, .smith-plain-page ol { padding-left: 1.5rem; } .smith-plain-page li + li { margin-top: 0.5rem; } /* Tables and images in legal/plain pages should not break the measure. */ .smith-plain-page img, .smith-plain-page table { max-width: 100%; height: auto; } /* BugZap #210: page content carries hardcoded inline pixel widths, pasted in from the design export - /services/ alone has width:300px, 427, 640, 760x2, 780x2, 1280x3 and 1408. Most are paired with a matching inline max-width and so behave, but one `width: 760px` has no max-width, and a fixed width with no cap cannot shrink. Measured on /services/: it overflows the viewport by 26px at 768, 186px at 600 and 394px at 390 - exactly her "the container for this text doesn't adjust to smaller screen sizes and therefore the text runs past the window". ⚠️ Why we failed to reproduce this twice: she reported it at 988px, and at 988 it genuinely does NOT overflow (760 < 988). It only bites below ~786px. Both previous passes spot-checked her stated width instead of sweeping a range, then told her we could not reproduce it. Sweep, don't spot-check. Fixed as a guard rather than by editing the content: the same paste pattern exists elsewhere on the page and will recur whenever similar markup is pasted in, and `max-width: 100%` can only ever cap - it never widens anything, so it cannot disturb a layout that already fits. Verified: overflow 0 at 768/600/390 and section widths unchanged at 1440. */ article.page [style*="width"] { max-width: 100% !important; } @media (max-width: 640px) { .smith-plain-page { padding-top: 48px; padding-bottom: 64px; } } /* ========================================================================== BugZap #223 — loose content on a block-built page ========================================================================== page.php only adds .smith-plain-page when a page has no ACF blocks at all, which leaves a gap: add an ordinary paragraph or heading to a page that also uses Smith blocks — exactly what happens when Christine clones a page and types under the hero — and that loose content inherits nothing and runs edge to edge, because the ACF sections carry their own full-bleed wrappers and the article has none. Target the loose elements directly rather than the article, so the ACF `section` siblings stay full-bleed. Same measure as the plain-page rules above so the two cases look identical. ========================================================================== */ article.page:not(.smith-plain-page) > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table, pre) { /* BugZap #231: this was an 800px reading measure, which on a block-built page sat ~240px inside the ACF sections either side and read as a mistake - measured on /scholarship/ at 1440, loose text ran 320..1120 against sections running 80..1360. The sections are a full-bleed
with a 64px page gutter (20px under 768) wrapping a 1280px-max inner, so their content edge is min(1280, viewport - 2*gutter), centred. Reproduce that here as a width rather than a max-width + padding, because on a single element padding would inset the text a further 64px inside the 1280 cap and miss the section edge on wide screens. Verified flush at 1512/1440/1200/988/760/390. .smith-plain-page keeps the 800px measure above - those pages are all prose, where a narrow column is right. */ box-sizing: border-box; width: min(1280px, 100% - 40px); margin-inline: auto; } @media (min-width: 768px) { article.page:not(.smith-plain-page) > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table, pre) { width: min(1280px, 100% - 128px); } } /* ========================================================================== BugZap #150, alignment follow-up — loose CORE BLOCK wrappers ========================================================================== The #231 rule above lists text-level tags only. A core block does not render as one of those: Buttons renders `
`, Image renders a `
` (already covered), Embed a `
`, Table a `
`. So the moment Christine added a Buttons block to /newsletter/ it fell straight through the constraint and went full-bleed — measured at 1836: the button sat at x=0 while the paragraph above it ran 278..1558. It read as a broken button, which is part of why #150 looked like a styling fault. Deliberately a SEPARATE rule rather than extra arguments in the #231 `:is()` list. `:is()` takes the specificity of its most specific argument, so adding a class there would lift that whole selector from (0,1,2) to (0,2,1) and silently change which rules win for every loose

and heading on every block-built page. This rule can only affect the wrappers it names. The existing tag-based rule already covers figure, blockquote, and table wrappers. Keep this list to wrappers that actually fall through that rule, avoiding a redundant higher-specificity override. `alignfull`/`alignwide` are excluded: those are the editor's explicit request to break the measure. ========================================================================== */ article.page:not(.smith-plain-page) > :is(.wp-block-buttons, .wp-block-media-text, .wp-block-separator):not(.alignfull):not(.alignwide) { box-sizing: border-box; width: min(1280px, 100% - 40px); margin-inline: auto; } @media (min-width: 768px) { article.page:not(.smith-plain-page) > :is(.wp-block-buttons, .wp-block-media-text, .wp-block-separator):not(.alignfull):not(.alignwide) { width: min(1280px, 100% - 128px); } } /* Same top-spacing treatment as the #231 text rule below, for the same reason: a button placed directly under a full-bleed ACF section would otherwise sit on its edge with only its own 16px block margin. */ article.page:not(.smith-plain-page) > section + :is(.wp-block-buttons, .wp-block-media-text) { margin-top: 3rem; } /* BugZap #231, second half: "the text goes tight to the top header". Loose content directly after a full-bleed block had only its own block margin (16px), so it collided with the section above. Space it like the start of a new section. Scoped to the first element after a block, so runs of consecutive paragraphs keep their normal rhythm. */ article.page:not(.smith-plain-page) > section + :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table, pre) { margin-top: 3rem; }