/* * Phone-width layer for the Duda desktop export. * * The export captured Duda's desktop+tablet rendering only; Duda used to serve * phones a separate mobile rendering that no longer exists off-platform. The * tablet band (768-1024px) still works from the exported CSS, so this file * only fills the gap below it, plus two header tweaks that also apply to the * tablet-band hamburger header. * * Loaded from , before Duda's own site/page CSS (which the export * places deep in , not , despite the fetchpriority/onload * hints on those links looking like typical head resources) - moving this * file anywhere later than reintroduces a real "loads desktop, then * visibly shrinks" flash, since nothing here would apply until the browser * finishes parsing most of the page. That means every rule below now needs * to out-specify the export's !important rules outright rather than win a * same-specificity tie by loading later - use an ID (#dm is free) or match/ * exceed the export's own selector length instead of relying on cascade * order, and re-check in the actual browser (computed styles, not just * "the selector looks right") since the export's specificity is not always * what it looks like at a glance. */ @media (max-width: 767.98px) { /* The export pins the page shell to desktop widths (.dmInner min-width 768px/960px !important). Let it shrink to the real viewport. */ #dm .dmInner, .dmDesktopBody .dmInner, #dm .dmStandardDesktop { min-width: 0 !important; } /* Stack the responsive grid. Duda's own responsive CSS keys every column width off the class (.dmDesktopBody .large-7{width:58.3%} vs .dmMobileBody .small-12{width:100%}) - a JS-driven class swap that only ran on Duda's own platform. Exported body keeps dmDesktopBody permanently, so every non-small-12-only column (anything also tagged large-N/medium-N, i.e. any multi-column desktop row) still gets its desktop percentage at phone widths no matter the viewport. Force both the wrapper and its columns back to full-width block stacking regardless of which size classes they carry. */ #dm .dmRespColsWrapper { display: block !important; width: 100% !important; } #dm .dmRespRow .dmRespCol { width: 100% !important; float: none !important; } /* Media never wider than the screen. */ #dm img { max-width: 100% !important; height: auto; } #dm iframe, #dm video, #dm .dmGeoMLocMap { max-width: 100% !important; } /* Office-location map embeds: the iframe is height:100% of a dmCustomHtml wrapper that only gets real height from desktop's equal-height flex columns. Block-stacked on mobile, the wrapper collapses to 0 and the map disappears entirely, leaving a blank gap. Give it a real height. */ #dm div.dmCustomHtml.dmCustomHtml[data-element-type="html"]:has(> iframe) { height: 300px !important; } #dm .dmCustomHtml > iframe { height: 100% !important; } /* Duda's phone-only visibility hooks (desktop CSS never defines them). */ [data-hidden-on-mobile] { display: none !important; } #dmRoot #dm .dmInner .hide-for-small { display: none !important; } /* Duda mobile typography classes used throughout the export (m-size-N on blocks, m-font-size-N on spans). Desktop CSS only defines the desktop size-N/font-size-N variants. */ .m-size-14, .m-font-size-14 { font-size: 14px !important; } .m-size-15, .m-font-size-15 { font-size: 15px !important; } .m-size-16, .m-font-size-16 { font-size: 16px !important; } .m-size-18, .m-font-size-18 { font-size: 18px !important; } .m-size-20, .m-font-size-20 { font-size: 20px !important; } .m-size-24, .m-font-size-24 { font-size: 24px !important; } .m-size-27, .m-font-size-27 { font-size: 27px !important; } .m-size-28, .m-font-size-28 { font-size: 28px !important; } /* The 35+ tiers are desktop-scale numbers; rendered literally they don't fit a 390px column (long words like LANDLORD/TENANT break mid-word). Cap them at phone-heading sizes while keeping the hierarchy. */ .m-size-35, .m-font-size-35 { font-size: 27px !important; } .m-size-36, .m-font-size-36 { font-size: 28px !important; } .m-size-40, .m-font-size-40 { font-size: 30px !important; } .m-size-48, .m-font-size-48 { font-size: 32px !important; } .m-size-52, .m-font-size-52 { font-size: 34px !important; } /* Safety net for the two flexslider carousels and the SSR hero: whatever width JS computes, never overflow the phone. */ #dm .flexslider .slides > li { max-width: 100vw !important; } #dm [dmle_extension="ssrimageslider"] { max-width: 100vw !important; overflow: hidden; } /* The reviews carousel exports at a fixed 163px desktop height; quotes wrap much taller on a phone and get clipped. Let the slide grow with its text (its content is absolutely centered on desktop, so flow it instead). */ #dm .flexslider, #dm .flexslider .flex-viewport, #dm .flexslider .slides > li { height: auto !important; min-height: 120px; } #dm .flexslider .slides > li[layout="center"] .slide-inner { position: static !important; max-width: none !important; max-height: none !important; padding: 28px 18px; margin: 0 auto; } /* Homepage bio headshot: the photo is a background-image on an otherwise empty desktop column, which collapses to a sliver once columns stack (desktop flex gave it equal-height; block flow gives it nothing). Give the portrait real height — but contained, not viewport-wide: full-bleed cover turned it into a whole-screen face on phones. Its column wrapper is already the site standard 350px content width, same as the caption text column next to it, so width just needs to be 100% - min(80vw,320px) undershot that, leaving the photo narrower than its own caption text with mismatched side margins. */ #dm .dmRespCol.u_1202327893 { width: 100% !important; min-height: 400px !important; margin: 8px auto 0 !important; background-size: cover !important; background-position: center top !important; } /* 5-star accent strip above the reviews carousel: a single decorative graphic inside a full flexslider widget whose JS keeps computing sliver widths on phones. Swap the whole slider out for a static CSS-rendered copy of the same image — nothing left for the runtime to mis-size. */ #dm .u_1234333411 .flexslider { display: none !important; } #dm .u_1234333411::before { content: ""; display: block; width: 164px; height: 48px; margin: 14px auto; background: url(../assets/images/5_stars-196w.png) center / contain no-repeat; } /* Drawer menu: the export pins it to 35vw (tablet-sized); on a phone that is ~135px and every item truncates. */ #dmRoot #dm .p_hfcontainer #hamburger-drawer.layout-drawer:not([data-origin="top"]) { width: 85vw !important; max-width: 340px; } /* Homepage hero slider: the runtime fills each slide with its photo (height:100% + object-fit:cover), but the generic img height:auto above beats that fill, collapsing the photo to a ~195px strip — the slide's own dark overlay then tints blank background, which reads as a giant gray void under the headline. Re-assert the fill inside the slider. */ #dm [dmle_extension="ssrimageslider"] img[data-grab="slide-media"] { height: 100% !important; width: 100% !important; object-fit: cover; } /* Contact form fields: desktop lays each row out as label-beside-input flex (label 75px + input calc(100% - 80px)), so the input reserves 80px of horizontal room for a label that no longer sits beside it — mobile-fixes.css already stacks dmRespCol, and the label itself renders as its own block line above the input here. Reclaim that 80px: the input should just fill the row. */ #dm div.dmInner .dmforminput.dmforminput input:not([type="checkbox"]):not([type="radio"]), #dm div.dmInner .dmforminput.dmforminput textarea, #dm .dmforminput.dmforminput > input:not([type="checkbox"]):not([type="radio"]), #dm .dmforminput.dmforminput > textarea { width: 100% !important; flex: 1 1 100% !important; max-width: 100% !important; } /* "Reach out today" contact cards + a few stat cards: the desktop design pulls them up over the section above with -125..-200px margins (plus a 20px desktop side-offset). In single-column flow that overlaps the text above mid-sentence on every page that has one. Flow them normally. */ #dmRoot #dm .dmBody div.u_1010565821, #dmRoot #dm .dmBody div.u_1067768783, #dmRoot #dm .dmBody div.u_1370170568, #dmRoot #dm .dmBody div.u_1699112842, #dmRoot #dm .dmBody div.u_1600539965, #dmRoot #dm .dmBody div.u_1940354159 { margin-top: 24px !important; margin-left: auto !important; margin-right: auto !important; } /* Homepage practice-area icon grid: desktop wraps 8 icons into two rows of 4 (large-3 = 25% width). The second row's wrapper carries a 56px margin-top for the visual gap between desktop rows, which read as one random gap in an otherwise flush list once stacked to a single mobile column. Zero that one-off gap, then give every icon its own even margin instead so all 8 are spaced consistently rather than packed flush against each other. */ html #dm .dmBody div.u_1221395364 { margin-top: 0 !important; } #dm .dmBody div.u_1456887147 .dmRespColsWrapper > .dmRespCol, #dm .dmBody div.u_1221395364 .dmRespColsWrapper > .dmRespCol { margin-bottom: 24px !important; } #dm .dmBody div.u_1221395364 .dmRespColsWrapper > .dmRespCol:last-child { margin-bottom: 0 !important; } /* Homepage footer bio column: desktop padded it as a 2-column gutter (70px right, 0 left) against a "Contact Info" column that duplicated the real footer bar below and has since been removed sitewide. Stacked to one column on mobile, the leftover gutter squeezed the bio text 70px from the right with nothing on the left. Standard 20px both sides. */ #dm div.u_1475005021 { padding-left: 20px !important; padding-right: 20px !important; border-left: 0 !important; } /* Same footer row (u_1535214452): 70px padding on both sides for the desktop 2-column gutter, unrelated to the column-level padding fixed above. At 390px that's 140px gone before any column even starts, which is where the earlier column-width investigation kept landing on 250px regardless of that column's own width rule - the row supplying the containing block was already too narrow. Standard 20px each side, matching every other full-bleed row on the page. */ #dm div[id="1535214452"] { padding-left: 20px !important; padding-right: 20px !important; } } /* "Reach out today" contact cards (u_1010565821 and siblings): the row is a flex container with the default align-items:stretch, and the card's own -150px margin-top (pulls it up to overlap the section above) means "stretch to match the sibling column" computes to sibling-height+150px instead of just sibling-height, so its bottom edge - and the empty space between the form and the bottom of the navy box - grows by however much taller the sibling (e.g. a bio photo) is than the form itself (confirmed: card height == sibling height + 150 on every affected page). height:auto does NOT opt out of this - auto is the value that triggers stretch sizing in the first place. Opt the card out of stretch entirely so it sizes to its own content instead. */ #dm .dmBody div.u_1010565821, #dm .dmBody div.u_1067768783, #dm .dmBody div.u_1370170568, #dm .dmBody div.u_1699112842, #dm .dmBody div.u_1600539965, #dm .dmBody div.u_1940354159 { align-self: flex-start !important; } /* Footer bio column (u_1475005021): was large-7/medium-7 (58.3%) next to the "Contact Info" column (large-5/medium-5) that duplicated the real footer bar below and has been removed sitewide. Unscoped (not just mobile) since the site's stuck-desktop body class applies large-7's width at every viewport above the phone breakpoint, and the column is now alone in its row at every size. */ #dm div.u_1475005021 { width: 100% !important; } /* Blog-post-template pages (24 of them share these two widget IDs): the outer row carries its own 50px margin-top on top of the inner row's own 50px padding-top, stacking to 100px of blank space above the H1 with nothing visible to justify it - and 100px again below the post body before the Older/Newer-post nav. Collapse the redundant outer margin and trim both paddings to a single reasonable gap. */ html #dm .dmBody div.u_1807786339 { margin-top: 0 !important; } html #dm .dmBody div.u_1471232539 { padding-top: 24px !important; padding-bottom: 32px !important; } @media (min-width: 1025px) { /* Desktop header phone/consultation block: "FREE CONSULTATION" (smaller, shorter) and the phone number (larger, longer) each live in their own fixed-width (228.5px) wrapper div centered via margin:auto, so their edges never line up with each other even though they read as a single two-line block - text-align on the

inside does nothing since the constraint is the wrapper's own width/margin, not the text. That column's own right edge also sits 40px further from the page edge than the logo's 15px left margin - an inherited row padding that has nothing visible on its other side (the sibling column is an empty spacer) to justify it. Right-align both wrappers (margin-left:auto, margin-right:0 instead of auto/auto) and match the row's padding to the header's own 15px so the block's right edge mirrors the logo's left edge. */ html #dm .p_hfcontainer div.u_1302850618 { padding-right: 0 !important; } html #dm .p_hfcontainer div.u_1824206852, html #dm .p_hfcontainer div.u_1581146052 { margin-left: auto !important; margin-right: 0 !important; } /* Logo: its column is a fixed 41.6% of the row (large-5), so on wide desktops the image keeps scaling up with the viewport - it's already upscaled past its own 800px source resolution (blurring) by ~1650px wide, and reads as oversized well before that. Capping max-width alone isn't enough to keep it flush left, though: the logo wrapper is display:inline-block, so its horizontal position comes from the containing row's own inline text-align:center (an attribute on u_1872857527, not from the wrapper's own - irrelevant here - margin rules), which does nothing while the box fills its column but centers it the moment a max-width cap gives it room to move. Override text-align on the column, not the wrapper, since that's what an inline-block child actually keys off. */ html #dm .p_hfcontainer div.u_1387980015.imageWidget { max-width: 620px !important; } html #dm .p_hfcontainer div.u_1770766552 { text-align: left !important; } /* Same header, right side: past ~1830px viewport the consultation/phone column's own colsWrapper (u_1030137825) hits a sitewide rows-1200/max-width:1200px cap meant for normal content rows, so its percentage-based columns compute against 1200px instead of the actual (wider) row - the wrapper stays left-anchored inside its row while its right edge falls short, leaving a growing gap before the block's right-aligned text actually reaches the row's true edge. */ html #dm .p_hfcontainer div[id="1030137825"] { max-width: none !important; } /* Nav row: the