/* ============================================================================ mobile-responsive.css — mobile optimization for the Duda static export ---------------------------------------------------------------------------- This site is a DESKTOP-ONLY export of a Duda site: is hard-coded with "dmDesktopBody dmLargeBody" and the bundled responsive CSS is gated behind body classes the editor runtime normally toggles by viewport width. The static export never toggles them, so pages render as a shrunk / clipped desktop layout on phones. Approach: a DETERMINISTIC, self-sufficient retrofit. We leave Duda's body classes untouched (so its desktop constraints keep working) and, inside @media queries, override only what mobile needs. Scoped under #dm with !important to beat Duda's high-specificity, class-gated desktop selectors (e.g. `.dmDesktopBody .dmRespRow .large-4{width:33.33%}`). Loaded LAST in . No JS dependency. ============================================================================ */ /* ========================================================================== A. Kill horizontal overflow + make the whole container chain fluid Applies to phones AND small tablets so nothing can scroll sideways. ========================================================================== */ @media (max-width: 1024px) { html, body { width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow-x: hidden !important; } /* Every Duda wrapper that could hold a fixed/desktop width */ #dm, #dm .dmInner, #dm .dmOuter, #dm .dmLayoutWrapper, #dm #iscrollBody, #dm #site_content, #dm .dmHeaderContainer, #dm #hcontainer, #dm .dmHeaderResp, #dm .allWrapper, #dm #dm_content, #dm .dmRespRowsWrapper, #dm .dmRespRow, #dm .dmRespColsWrapper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; left: 0 !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; box-sizing: border-box !important; } #dm #iscrollBody, #dm #site_content { overflow-x: hidden !important; } /* Media can never exceed its container */ #dm img, #dm video, #dm iframe, #dm svg, #dm .videobgframe, #dm .dmPhotoGallery img { max-width: 100% !important; height: auto; } } /* ========================================================================== B. Phone layout (<=767): stack columns, fix images, wrap text ========================================================================== */ @media (max-width: 767px) { /* -- Comfortable side gutters on rows -- */ #dm .dmRespRow { padding-left: 16px !important; padding-right: 16px !important; } /* -- Stack ALL columns full width, regardless of large-N/medium-N -- */ #dm .dmRespColsWrapper { display: block !important; } #dm .dmRespRow .dmRespCol, #dm .dmRespRow .column { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; left: 0 !important; float: none !important; display: block !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Columns explicitly authored to sit 2-up on phones keep 50% */ #dm .dmRespRow .dmRespCol.small-6 { width: 50% !important; max-width: 50% !important; float: left !important; } /* -- Images: the key logo fix -- Duda makes .imageWidget display:inline-block, so it shrink-wraps to the image's native pixel width (e.g. the 785px logo) and overflows the column. Force it to a block that fills the column; the image then scales down. */ #dm .imageWidget, #dm .dmImgCoverWrapper { display: block !important; width: auto !important; max-width: 100% !important; text-align: center !important; } #dm .imageWidget > a, #dm .imageWidget picture { display: inline-block !important; max-width: 100% !important; } #dm .imageWidget img { width: auto !important; max-width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; } /* Header logo: keep it a sensible height so it doesn't dominate the fold */ #dm .dmHeaderResp .imageWidget img, #dm .dmHeaderContainer .imageWidget img { max-height: 120px !important; width: auto !important; } /* -- Text: kill nowrap so address / phone / headings wrap instead of clip -- */ #dm .dmNewParagraph, #dm .dmNewParagraph *, #dm p, #dm p * { white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; } /* -- Headings scale to the viewport -- */ #dm h1 { font-size: clamp(26px, 8vw, 40px) !important; line-height: 1.15 !important; } #dm h2 { font-size: clamp(22px, 6.5vw, 32px) !important; line-height: 1.2 !important; } #dm h3 { font-size: clamp(18px, 5.5vw, 26px) !important; line-height: 1.25 !important; } /* Wide fixed tables / coupons shouldn't force horizontal scroll */ #dm table, #dm .dmCoupon { width: 100% !important; max-width: 100% !important; } } /* ========================================================================== C. Navigation (<=767) Hide the desktop horizontal nav; turn the header-stack nav (u_1390007907) into a full-width, tap-friendly vertical menu with sub-items expanded (touch devices have no hover to reveal them). ========================================================================== */ @media (max-width: 767px) { #dm .hide-for-small, #dm [data-hidden-on-mobile] { display: none !important; } #dm nav.u_1390007907, #dm .dmHeaderStack nav.unifiednav { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; text-align: left !important; } #dm nav.u_1390007907 .unifiednav__container.unav-top { display: block !important; width: 100% !important; } #dm nav.u_1390007907 .unifiednav__container.unav-top > li { display: block !important; width: 100% !important; float: none !important; margin: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.15); } #dm nav.u_1390007907 .unifiednav__item { display: block !important; width: 100% !important; padding: 14px 16px !important; box-sizing: border-box; text-align: left !important; line-height: 1.3 !important; } #dm nav.u_1390007907 .nav-item-text { font-size: 16px !important; white-space: normal !important; } /* Reveal sub-menu items inline (no hover on touch) */ #dm nav.u_1390007907 .unav-sub { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; box-shadow: none !important; background: transparent !important; } #dm nav.u_1390007907 .unav-sub .unifiednav__item { padding-left: 34px !important; } } /* ========================================================================== D. Contact form (<=767) — full-width, comfortable, no iOS zoom-on-focus ========================================================================== */ @media (max-width: 767px) { #dm .dmform-wrapper, #dm .dmform, #dm .dmform-inputs, #dm .dmforms-inline .dmforms-list-item { width: 100% !important; max-width: 100% !important; float: none !important; box-sizing: border-box; } #dm .dmforms-inline input, #dm .dmforms-inline textarea, #dm .dmforms-inline select, #dm .dmform input, #dm .dmform textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; font-size: 16px !important; } #dm .dmButtonLink, #dm a.dmWidgetButton, #dm .dButtonWidget a { min-height: 44px; } } /* ========================================================================== E. Tablet (768–1024) — trim oversized side padding, keep media fluid ========================================================================== */ @media (min-width: 768px) and (max-width: 1024px) { #dm .dmRespRow { padding-left: 24px !important; padding-right: 24px !important; } #dm .imageWidget img { max-width: 100% !important; height: auto !important; } }