/* ========================================================================== mobile-fix.css — restores mobile (<=767px) heading & text sizing -------------------------------------------------------------------------- WHY THIS FILE EXISTS This site is a static, desktop-published capture of a Duda site. Every page hardcodes window._currentDevice = 'desktop' and loads only Duda's DESKTOP runtime CSS. Duda's mobile layout — the theme's smaller heading sizes and the m-font-size-* utility classes — lived only in the device-specific MOBILE runtime CSS that Duda's servers used to serve to phones. This frozen mirror never loads it, so on a phone the headings render at desktop size (h1 72px / h2 60px) and push the page to ~768px wide, overflowing the screen. The plain @media(max-width:767px) rules that ARE present still fire (hamburger nav, body text), which is why only the headings/oversized text break. This file supplies the missing mobile rules using plain media queries, so it works independently of Duda's remote runtime. Loaded last in on every page. Safe to remove if the site is ever re-published from Duda with a proper responsive build. ========================================================================== */ @media (max-width: 767px) { /* --- THE CRITICAL FIX ----------------------------------------------------- The main layout container carries `min-width: 768px` (a desktop floor from the desktop-only build). On a phone that pins the whole page to 768px wide, forcing a zoomed-out / horizontally-scrolling desktop view. Release the floor so the layout fits the screen; children (width:auto) follow. --- */ #dm .dmInner, .dmInner { min-width: 0 !important; max-width: 100% !important; } /* --- Theme headings (no mobile size rule exists) -> scale down fluidly --- */ #dm div.dmContent h1, #dm div.dmFooter h1, #dm div.flex_hfcontainer h1, #dm div.p_hfcontainer h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.15 !important; } #dm div.dmContent h2, #dm div.dmFooter h2, #dm div.flex_hfcontainer h2, #dm div.p_hfcontainer h2 { font-size: clamp(24px, 6.6vw, 34px) !important; line-height: 1.2 !important; } /* --- Restore Duda's intended mobile text sizes (m-font-size-* utilities that were defined only in the missing mobile runtime). Names encode the pixel size, per Duda's convention. --- */ #dm .m-font-size-12 { font-size: 12px !important; } #dm .m-font-size-14 { font-size: 14px !important; } #dm .m-font-size-19 { font-size: 19px !important; } #dm .m-font-size-30 { font-size: 30px !important; } /* --- Safety net: a heading must never be able to push the page wider than the screen; long single words break instead of overflowing. --- */ #dm div.dmContent h1, #dm div.dmContent h2, #dm div.dmContent h3, #dm div.dmContent h4, #dm div.dmContent h5, #dm div.dmContent h6 { overflow-wrap: break-word; word-wrap: break-word; } }