/* ========================================================================= * BWL mobile responsiveness fixes (child theme) * --------------------------------------------------------------------------- * Restores breakpoint behavior dropped by the parent-theme upgrade. * * Three categories of rule were removed during the upgrade: * 1. Legacy float-based column widths (col4-1, col3-1, col2-1, etc.) * no longer get reset to 100% on mobile, so columns stay squished. * 2. CSS Grid --area variables (--aream{N}_auto, --areat{N}_auto) are * defined in the upgraded theme but never activated at any breakpoint. * 3. The hide-mobile / hide-tablet visibility classes (set via the * Builder UI) have no underlying display:none rules anywhere. * * NOTE: This stylesheet loads BEFORE the parent themify-concate bundle * (Themify outputs that link later in via output buffering). So * every selector here is prefixed with `body` to bump specificity above * the parent's same-selector rules and win the cascade. * * Themify standard breakpoints (matches themify_vars.breakpoints in JS): * mobile : <= 680px * tablet : 681px - 959px * tablet_landscape : 960px - 1280px * desktop : >= 1281px * ========================================================================= */ /* ---------- All viewports ---------- */ /* #pagewrap has box-sizing:border-box + height:100% + padding-top:100vh, which makes the padding eat the entire height (content area = 0px). Result: builder content overflows pagewrap, and the wp_footer-injected custom footer (which lives AFTER #pagewrap in the DOM) ends up rendered on top of / before the page content. Letting pagewrap grow with its content fixes the flow. */ body #pagewrap { height: auto; min-height: 100vh; } /* ---------- Tablet & phone: restore row horizontal padding ---------- The parent CSS has @media(max-width:1260px){.row_inner{max-width:94%}} and @media(max-width:760px){.row_inner{max-width:90%}}, but a later non-media rule wins the cascade and removes the side padding: .pagewidth, .module_row > .row_inner, .module-layout-part .module_row.fullwidth_row_container > .row_inner { width: 1160px; max-width: 100%; margin: 0 auto; } Specificity of `.module_row > .row_inner` is (0,2,0) — beats a plain `.row_inner` rule. We mirror those selectors with a `body` prefix so our higher-specificity rule wins regardless of source order. `.pagewidth` is the wrapper used on non-Builder pages (e.g. the blog archive at #layout.pagewidth) where there is no .module_row ancestor. */ @media screen and (max-width: 1260px) { body .pagewidth, body .module_row > .row_inner, body .module-layout-part .module_row.fullwidth_row_container > .row_inner { max-width: 94%; } } @media screen and (max-width: 760px) { body .pagewidth, body .module_row > .row_inner, body .module-layout-part .module_row.fullwidth_row_container > .row_inner { max-width: 90%; } } /* ---------- Dropdown-menu-style: fix menu position when open on mobile ---------- The parent CSS positions the menu with `position:absolute; left:50%; margin-left:-113px; top:100%`, which on mobile resolves to the wrong spot (off-screen). Keep position:absolute so the menu stays anchored to its parent (#main-nav-wrap, which contains the hamburger) and moves with the page as the user scrolls — but reset left/margin/width so the menu drops directly under the button at full screen width. */ @media screen and (max-width: 1100px) { body.dropdown-menu-style.dropdown-menu-visible #headerwrap #main-nav { position: absolute !important; top: 100% !important; bottom: auto !important; left: 0 !important; right: auto !important; margin: 0 !important; /* #main-nav-wrap (the absolute parent) is shrunk to 0px in this layout, so width:100% resolves to 0. Use 100vw instead — the menu spans the full viewport width while still being vertically anchored to the parent (so it follows the hamburger as you scroll). */ width: 100vw !important; max-width: 100vw !important; max-height: 70vh; overflow-y: auto; } } /* ---------- Phone (<= 680px) ---------- */ @media screen and (max-width: 680px) { /* Grid-based rows: switch to mobile auto-stack template areas AND collapse the grid to a single column. Per-row --col overrides (e.g. `--col: 1.3331fr 1fr`) keep the grid 2-wide otherwise, so the surviving column stays at its desktop ratio width even when --area says to stack. Forcing --col: 1fr makes them full-width. --col uses !important because per-page Builder rules (selector `.themify_builder_content-NNNN .tb_xxxxx`, specificity 0,2,0) override our (0,1,1) selector otherwise. */ body .tb_col_count_2 { --area: var(--aream2_auto); --col: 1fr !important; } body .tb_col_count_3 { --area: var(--aream3_auto); --col: 1fr !important; } body .tb_col_count_4 { --area: var(--aream4_auto); --col: 1fr !important; } body .tb_col_count_5 { --area: var(--aream5_auto); --col: 1fr !important; } body .tb_col_count_6 { --area: var(--aream6_auto); --col: 1fr !important; } body .tb_col_count_7 { --area: var(--aream7_auto); --col: 1fr !important; } body .tb_col_count_8 { --area: var(--aream8_auto); --col: 1fr !important; } /* Legacy float/percentage column widths: force full-width so they stack */ body .module_column.col2-1, body .module_column.col3-1, body .module_column.col3-2, body .module_column.col4-1, body .module_column.col4-2, body .module_column.col4-3, body .module_column.col5-1, body .module_column.col5-2, body .module_column.col5-3, body .module_column.col5-4, body .module_column.col6-1, body .module_column.col6-2, body .module_column.col6-3, body .module_column.col6-4, body .module_column.col6-5 { float: none; width: 100%; max-width: 100%; margin-left: 0; } /* Visibility classes from the Builder UI */ .hide-mobile { display: none !important; } } /* ---------- Tablet (681 - 959px) ---------- */ @media screen and (min-width: 681px) and (max-width: 959px) { /* Auto-collapse 6+ column grids into tablet-friendly layouts. Also reset --col to a smaller column count so per-row --col overrides don't keep the grid at desktop counts. See phone block for why !important is required. */ body .tb_col_count_6 { --area: var(--areat6_auto); --col: 1fr 1fr 1fr !important; } body .tb_col_count_7 { --area: var(--areat7_auto); --col: 1fr 1fr !important; } body .tb_col_count_8 { --area: var(--areat8_auto); --col: 1fr 1fr !important; } .hide-tablet { display: none !important; } } /* ---------- Tablet landscape (960 - 1280px) ---------- */ @media screen and (min-width: 960px) and (max-width: 1280px) { .hide-tablet_landscape { display: none !important; } } /* ---------- Desktop (>= 1281px) ---------- */ @media screen and (min-width: 1281px) { .hide-desktop { display: none !important; } }