/* * mobile-fixes.css — The Diet Rebel * Loaded after all inline page styles as a universal override layer. * DO NOT remove or consolidate inline CSS during this phase. * All rules are scoped to mobile breakpoints or specific selectors. * Desktop styles are unaffected. * * Fixes applied (audit-approved, 2026-07-14): * F1 — Overlay z-index: know-your-number.html nav sits above overlay * F2 — Slide-in overlay upgrade: 5 pages use translateX pattern instead of canonical * F3 — site-nav__cta white-space:nowrap causes horizontal overflow at 320px * F4 — CTA buttons: hero-btn-primary / hero-btn-outline full-width + centered on mobile * F5 — hero-cta-stack / glp-hero__ctas: stretch children on mobile * F6 — Pricing decision__grid: 1 column on mobile (approved: single column) * F7 — Pricing guarantee-banner padding on mobile * F8 — GLP-1 inline grid overflow: glp-responsive-grid class * F9 — GLP-1 article fixed widths: max-width:100% override * F10 — Maintenance hero: increase mobile height so face is visible * F11 — trust__line / trust__credentials nowrap overflow (home.html) * F12 — nw-section-nav nowrap overflow (maintenance.html) * F13 — pricing free-consult-banner__features li and card__price-note nowrap * F14 — resources res-email__sub and res-start-here-top__link nowrap * F15 — Missing overflow-x:hidden on 4 article pages (via body rule) * F16 — Article table overflow-x:auto (4 pages) */ /* ───────────────────────────────────────────── F1 — know-your-number.html overlay z-index The nav on this page has z-index:900 which sits above the overlay z-index:600. Raise overlay to 1000 on this page only. ───────────────────────────────────────────── */ /* Applied via direct page edit — see fix_approved.py */ /* ───────────────────────────────────────────── F3 — site-nav__cta white-space:nowrap → horizontal overflow at 320px The "WORK WITH THE REBEL" nav button forces the nav bar wider than viewport. At ≤768px the nav CTA is already hidden (display:none), so this is a safety net for any edge case where it remains visible. ───────────────────────────────────────────── */ @media (max-width: 768px) { .site-nav__cta { white-space: normal !important; } } /* ───────────────────────────────────────────── F4 — CTA buttons: full-width, centered text on mobile hero-btn-primary and hero-btn-outline have no mobile breakpoint on 8 pages. Universal rule: safe to apply — only activates at ≤768px. ───────────────────────────────────────────── */ @media (max-width: 768px) { .hero-btn-primary, .hero-btn-outline { width: 100% !important; text-align: center !important; justify-content: center !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; } } /* ───────────────────────────────────────────── F5 — hero-cta-stack / glp-hero__ctas: stretch children Container goes column but buttons don't stretch to fill it. ───────────────────────────────────────────── */ @media (max-width: 768px) { .hero-cta-stack, .glp-hero__ctas, .nw-hero__ctas, .ms2-hero__ctas, .s2-hero__ctas { align-items: stretch !important; flex-direction: column !important; } } /* ───────────────────────────────────────────── F6 — Pricing decision__grid: 1 column on mobile (approved) The existing breakpoint at 640px already sets 1fr, but 768px sets 1fr 1fr. Override to 1 column at 768px as well. ───────────────────────────────────────────── */ @media (max-width: 768px) { .decision__grid { grid-template-columns: 1fr !important; } } /* ───────────────────────────────────────────── F7 — Pricing guarantee-banner: add padding on mobile guarantee-banner__inner has padding:0 var(--pad) on desktop but var(--pad) may resolve to 0 on mobile. Ensure minimum 20px padding. ───────────────────────────────────────────── */ @media (max-width: 768px) { .guarantee-banner__inner { padding-left: 20px !important; padding-right: 20px !important; } .guarantee__inner { padding-left: 20px !important; padding-right: 20px !important; } } /* ───────────────────────────────────────────── F8 — GLP-1 inline grid: glp-responsive-grid class 4 inline grid-template-columns:1fr 1.4fr styles on glp1.html. Class added via direct HTML edit. CSS rule here. ───────────────────────────────────────────── */ @media (max-width: 860px) { .glp-responsive-grid { grid-template-columns: 1fr !important; } } /* ───────────────────────────────────────────── F9 — GLP-1 article fixed widths: prevent overflow glp1-deep-dive-guide.html, glp1-medications-guide.html, medicaid-glp1-coverage.html, medicare-glp1-coverage.html have fixed widths (600px, 680px, 760px, 860px) outside media queries. ───────────────────────────────────────────── */ @media (max-width: 768px) { /* GLP-1 article content containers */ .glp-deep__inner, .glp-med__inner, .coverage__inner, .glp-stage-inner, .glp-faq__inner, .glp-timeline__inner { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } /* Any element with a fixed pixel width that may overflow */ [style*="width:680px"], [style*="width: 680px"], [style*="width:860px"], [style*="width: 860px"], [style*="width:760px"], [style*="width: 760px"], [style*="width:600px"], [style*="width: 600px"] { width: 100% !important; max-width: 100% !important; } } /* ───────────────────────────────────────────── F10 — Maintenance hero: increase mobile height At 390px, 85vw = 331px which may not show the full subject. Increase to 100vw (max 520px) for more vertical space. ───────────────────────────────────────────── */ @media (max-width: 768px) { .nw-hero__img { height: 100vw !important; max-height: 520px !important; } } /* ───────────────────────────────────────────── F11 — home.html trust line overflow .trust__line and .trust__credentials have white-space:nowrap which causes overflow at 320px. ───────────────────────────────────────────── */ @media (max-width: 480px) { .trust__line, .trust__credentials { white-space: normal !important; flex-wrap: wrap !important; } } /* ───────────────────────────────────────────── F12 — maintenance.html section nav overflow .nw-section-nav a has white-space:nowrap — tabs overflow on narrow screens. ───────────────────────────────────────────── */ @media (max-width: 480px) { .nw-section-nav { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; white-space: nowrap !important; flex-wrap: nowrap !important; } .nw-section-nav a { flex-shrink: 0 !important; } } /* ───────────────────────────────────────────── F13 — pricing.html nowrap overflow elements .free-consult-banner__features li and .card__price-note ───────────────────────────────────────────── */ @media (max-width: 480px) { .free-consult-banner__features li { white-space: normal !important; } .card__price-note { white-space: normal !important; } } /* ───────────────────────────────────────────── F14 — resources.html nowrap overflow elements .res-email__sub and .res-start-here-top__link ───────────────────────────────────────────── */ @media (max-width: 480px) { .res-email__sub { white-space: normal !important; } .res-start-here-top__link { white-space: normal !important; } } /* ───────────────────────────────────────────── F15 — Missing overflow-x:hidden on body band-colors.html, band-options.html, band-typo.html, chapter-cards-lab.html Applied via direct page edit. ───────────────────────────────────────────── */ /* ───────────────────────────────────────────── F16 — Article table overflow-x:auto band-options.html, do-i-have-to-track-calories-forever.html, medicaid-glp1-coverage.html, medicare-glp1-coverage.html Applied via direct HTML edit (wrap in scrollable div). ───────────────────────────────────────────── */ @media (max-width: 768px) { /* Safety net: any unwrapped table in article content */ .article-body table, .article__body table, .content table, .post-body table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; } }