/* responsive-fix.css * Makes Duda's "desktop" export reflow like the live (production) site on * phones and tablets. Works with the dm-device-class body-class toggle * (injected per page) that switches the body to dmMobileBody / dmTabletBody so * Duda's smaller-breakpoint CSS applies. Duda also freezes a per-element pixel * width with !important on nearly every element (#dm .dmBody div.u_{ * width:Npx!important}); those use a single ID, so the #dmRoot #dm (two-ID) * prefix below outranks them and caps everything to its container. * Loaded LAST in . * * Layout map of the breakpoints: * - <=1024px : shared rules — kill the empty sticky-header gap, put the * logo + "Request a Callback" button on one compact row, centre * the "Call Us Now" bar, release Duda's frozen margins/widths. * - <=767px : the Foundation grid already stacks columns (small-* + Duda's * own max-width:767 media), so only the margin/width release is * needed. * - 768-1024 : the grid stays in its 2-column medium layout, but production * stacks every content section into a single column, so force * the columns to stack. */ /* ======================================================================== SHARED — everything below the desktop breakpoint (mobile + tablet) ======================================================================== */ @media (max-width: 1024px) { html, body { overflow-x: hidden !important; } /* inner-wrapper min-width that otherwise clips the page */ #dm .dmInner, .dmInner { min-width: 0 !important; width: 100% !important; } #dm .hasStickyHeader .dmInner #desktopHeaderBox, #dm .hasStickyHeader .dmInner .dmHeaderContainer { min-width: 0 !important; } /* The sticky-header spacer reserves the desktop header's height (~120px), but the real header renders inside the page body — leaving a big empty gap at the top of the page. The actual sticky header is empty here, so drop it. */ #dmRoot #dm #stickyHeaderSpacer { height: 0 !important; min-height: 0 !important; } /* Duda freezes desktop positioning as large per-element left/right margins (e.g. margin-left:460px on the header button, 335px on the thank-you headline) plus fixed pixel widths — all with !important under a single-ID selector. The #dmRoot #dm (two-ID) prefix outranks them: reset the horizontal margins and release the widths so content fills its column, while keeping vertical margins for spacing. */ #dmRoot #dm .dmBody [class*="u_"], #dmRoot #dm .p_hfcontainer [class*="u_"] { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; left: auto !important; } #dmRoot #dm .dmBody div.dmNewParagraph, #dmRoot #dm .dmBody div.dmRespCol { width: auto !important; } /* Several CTA buttons freeze a desktop width such as calc(100% - 460px) paired with a matching left margin to centre them in the 1200px layout. Resetting the margin (above) collapses that width to a ~30px sliver. Release the width so each block button spans its column, the way production renders them. */ #dmRoot #dm .dmBody .dmButtonLink { width: auto !important; } /* the custom-HTML callback form embed (its own