/** * Global fluid container system — single source of truth for content * width across the whole site (header, category nav, mega-menu, homepage * sections, footer, and — via the GeneratePress override below — * WooCommerce/native page content too). Every section should use one of * these unless it has an intentional reason not to. * * Tokens: assets/css/utilities/variables.css (--layout-*). */ /* * THE root-cause fix. GeneratePress wraps the entire page — #page, plus * .inside-header / .inside-navigation — in .grid-container, and prints * its own dynamic CSS very late in with a flat * `max-width: 1200px` (or whatever Customize > Layout > Container is set * to). That's what was capping homepage sections, the footer, and * WooCommerce content at a fixed width no matter what our own CSS said — * our header/mega-menu/announcement-bar were only escaping it because * they render *outside* #page (hooked to generate_before_header / * generate_header, before
even opens), not because * anything made them fluid on their own. * * Reads --layout-max-width, not --gp-container-width (GeneratePress's own * Customizer-driven value) — this theme's container system is the single * authority on content width; GP's own dynamic CSS is only being outrun * here, not deferred to. !important is still required regardless of which * token is used: it's the only thing that reliably beats a * same-specificity rule GP prints after ours; scoped to exactly this one * property. */ .grid-container { max-width: var(--layout-max-width) !important; } /* * Default container: header, category nav, mega-menu inner content, * homepage sections, WooCommerce grids, footer. * * width: min(100% - gutters, max-width) instead of the old * width:100% + max-width + padding-inline combo — one calculation * instead of three interacting ones, so there's nothing to keep in sync. * box-sizing: border-box (set globally in base/reset.css's `*` rule) * means the gutters are already included in that 100%, not added on top. */ .myshop-container { width: min(100% - (2 * var(--layout-gutter)), var(--layout-max-width)); margin-inline: auto; } /* Wide variant — large editorial banners, wide promo sections. */ .myshop-container--wide { width: min(100% - (2 * var(--layout-gutter)), var(--layout-wide-max-width)); margin-inline: auto; } /* Readable variant — long-form text: policies, blog content, FAQs. */ .myshop-container--readable { width: min(100% - (2 * var(--layout-gutter-small)), var(--layout-readable-max-width)); margin-inline: auto; } /* Escape hatch for a component that needs the full available width with no cap at all, while keeping the same side gutters as the others. */ .myshop-container--full { width: 100%; max-width: none; padding-inline: var(--layout-gutter); margin-inline: auto; } /* * Structural alignment (centering the container block) is independent * from text alignment inside it — these only ever touch text-align, on * purpose. Default text alignment stays browser-normal (start); nothing * in this file sets it globally. */ .myshop-align-center { text-align: center; } .myshop-align-start { text-align: start; } .myshop-align-end { text-align: end; } /* * Full-bleed section pattern for future use: * *
*
...
*
* * .myshop-section-outer carries a background (color/image) that spans * the full viewport; the .myshop-container child keeps the actual * content centered and capped. This is exactly what * .myshop-announcement-bar / .myshop-category-nav / .myshop-footer * already do individually with their own class names — this rule exists * so a *new* full-bleed section can opt into the same pattern without * inventing another one-off implementation. */ .myshop-section-outer { width: 100%; }