/* lex-mobile-polish */ /* ── All widths ── */ /* Comparison tables. 56 pages carry a .lex-compare table inside .lex-table-wrap. The rule that makes the wrapper scroll sideways exists, in lex-10ac7d9016f8.css, but that file is not among the seven stylesheets the pages load, so a 520px table sat inside a 390px screen and ran 198px off the right edge on the civil litigation hub. Restated here so it actually ships. */ .lex-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch; max-width:100%!important;margin:22px 0} .lex-table-wrap .lex-compare{min-width:520px;margin:0} /* Directory links inside the practice area hubs. lex-area-nav.php ships them as #2C3154, dark navy on white at 12:1. A generic rule elsewhere, section a:not(.btn):not(.hero-cta):not(...) { color: var(--gold) } outranks it on specificity through its long :not() chain, painting every directory link gold on white at 1.84:1. The runtime contrast script then repairs each one to #926B13 after paint. This puts the correct colour in the stylesheet so it is right from the first frame instead of the second. */ section .lex-an-b a, .lex-an-d .lex-an-b a, .lex-an-b li a{ color:#2C3154!important} section .lex-an-b a:hover, .lex-an-d .lex-an-b a:hover{color:#0F1E38!important} /* ── 1. Typography floor, all widths ── A floor must only lift. CSS has no "minimum font-size", so the rule has to name exactly the text that is small and nothing else. Two hooks do that: (a) the classes the audit measured below 12px, listed individually; and (b) the unclassed runs, which all turned out to carry their smallness as an inline style attribute (style="font-size:11px" and the like). An attribute selector reaches precisely those and no others. An earlier draft of this block also applied the floor to "main p, section p, main li" and "*" inside a few containers. Measured on the homepage at 390px that clause lifted nothing, because no paragraph was small, and shrank 94 paragraphs from 15.6px to 12.5px. It was caught before it shipped. Do not reintroduce a container-wide rule here. Uppercase eyebrow labels and letterspaced kickers carry neither hook and are left alone on purpose. Applied at every width: a 9px source credit is no more legible on a desktop than on a phone. */ .h-card-sub, .mm-row-sub, .guide-card-steps, .calc-card-ctx, .fam-item-sub, .cm-sub, .h-card-reveal-txt, .tm-loc, .assoc-modal-val, .bio-modal-val, .gr-count, .lex-rel-intro, .area-desc, .ac-th, .guide-topic, .c-tag, .lex-an-q2, .fs, .leg-applies, .lex-an-hero-go, .lex-sa-count, .lex-an-count, .disclaimer, .lex-ft-copy, .lex-ft-copy a, .lex-ft-copy span, .con-act-pill-val, .lcs-role, .lcs-credential, .fam-hook-src, .est-collapsed-hint, .lex-toc-meta, .fam-item-title, .sp-desc, .lcs-ghost-bio, .fam-hook-caption, .fam-cta-text, .stage-desc, .tm-who, .card-note, /* seen only at desktop width, where the p/li clamp does not apply */ .sp-calc-disclaimer, .lex-an-hint, .lex-if-legal, .lex-lead-note, .vt-stat-label, .lex-sa-legal, :not(p):not(li):not(dd):not(blockquote):not([style*="uppercase"]):is( [style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:9.5px"], [style*="font-size: 9.5px"], [style*="font-size:10px"], [style*="font-size: 10px"], [style*="font-size:10.5px"],[style*="font-size: 10.5px"], [style*="font-size:11px"], [style*="font-size: 11px"], [style*="font-size:11.5px"],[style*="font-size: 11.5px"]){ font-size:14px!important; line-height:1.6!important; } /* Why the :not() chain: an existing rule in lex-mobile-final already lifts every p, li, dd and blockquote to clamp(15px,4vw,17px) below 900px. Without the exclusion this rule would pull those back down to 12.5px, which is the opposite of a floor. Uppercase labels are excluded for the reason above. */ /* Two rules elsewhere outrank a plain class and were holding text at 10px: #hero .h-card-sub (id + class) lex-mobile-final and the theme .con-side .disclaimer (two classes) the theme Matched with one more level of specificity each. */ #hero .h-card-front .h-card-sub, #hero .h-card .h-card-sub, .h-card-front .h-card-sub, .h-card .h-card-sub{font-size:14px!important} body .con-side .disclaimer, body .rev .disclaimer, body .calc-card .disc, body .calc-disc{font-size:14px!important;line-height:1.6!important} .fam-hook-stat .fam-hook-src{font-size:14px!important} /* The calculator disclaimer block. lex-global-fallback.css sets @media(max-width:900px){ .disc-block p{font-size:11px!important} } which is the block carrying the substantive caveats: "this is an approximation of the Ontario table amount", the section 7 and shared custody exceptions, the $50,000 probate exemption note. On the six calculator pages that carry it, that was the only text still under 12px, and it is the text a reader most needs. Scoped to .disc-block only. An earlier draft also listed .calc-field label, .calc-result .rbreak, .svc-card p and friends, because a grep of the stylesheets showed rules shrinking them on mobile. Measured in the browser, those rules are outranked and the elements already render at 13 to 15px, so the "fix" shrank eleven of them. Grep found the rule; only the browser found the truth. Every selector below was confirmed under 12px in a live render first, and the block was re-measured after: 11 lifted, 0 shrunk. */ .disc-block p, .disc-block p strong, .disc-block p em, .disc-block p a, .disc-block li{font-size:14px!important;line-height:1.65!important} /* ── 2. The decorative section numerals ── .why-col-num renders at 1.02:1 and 1.15:1 at every width, which is not faint, it is absent. Lifted to roughly 3:1, still clearly a background device. The first draft scoped this to phones; the tablet pass at 768px found the same three numerals invisible. The second numeral was also red on navy, a pairing that cannot reach 3:1 at any opacity, so all three are gold. Measured after the change: 3.3:1 and above, 323 of 323 dark-background text nodes on the homepage passing. */ .why-col-num{opacity:.55!important;color:#E8B84B!important} /* ── 3. The logo, stretched on iPhone only ── The wordmark sits in an that is display:flex, align-items:stretch and 40px tall. The inside has height:auto and an intrinsic 1550x215. Chrome honours the aspect ratio and draws 170x24. WebKit stretches a replaced element with height:auto to fill the 40px cross axis, so the same markup renders 170x40 on an iPhone: the wordmark pulled to nearly twice its height. That is the "LEXALTICO LLP looks stretched" report, and it is why every Chromium measurement I took said the ratio was correct. align-self:center opts the image out of the stretch. object-fit:contain is a second guard: even if something else forces a taller box, the artwork keeps its proportions instead of distorting. */ /* Phones and tablets only. The image carries inline height:32px;width:auto, which is its correct desktop size. Applying height:auto!important at every width overrode that inline height and left the desktop size undefined: Chrome rendered 186px wide, Junaid's browser rendered about 740px, the wordmark spilling out of the header. Below 900px the max-width caps in lex-nav-fix take over, so height:auto is right there and only there. */ #nav img, nav a img{object-fit:contain} @media(max-width:900px){ #nav img, nav a img{align-self:center!important;height:auto!important} } /* ── 4. Ten pixels of horizontal overflow ── Unclipped, the homepage measured 385px wide inside a 375px viewport. The site hides that with overflow-x:hidden on html and body, which Chromium obeys silently; iOS Safari treats overflow-x:hidden on the root as a suggestion and lets the page shift instead. Two causes: nav position:fixed with width:auto shrink-to-fits to its content .con-side a grid item whose min-width:auto floor forced a 384.5px track Anchoring the fixed header on both edges makes its width the viewport, and min-width:0 lets the grid item shrink to its column, which is the standard remedy for a grid or flex child that refuses to go below its content. */ nav{left:0!important;right:auto!important;width:100vw!important;max-width:100vw!important} .faq-side, .con-side{min-width:0!important} /* ── 5. Phone and email links inside running text ── 8.41.0 gave every tel: and mailto: link min-height:40px and line-height:40px to satisfy the 40px tap target. On standalone buttons that is right. Inside a sentence it is not: the link became a 40px tall box on a 15px line, which is the "text all merged" report. WCAG 2.5.8 exempts links inline in a block of text for exactly this reason, so the rule is withdrawn. The standalone Call and Email buttons get their size from their own classes. */ a[href^="tel:"], a[href^="mailto:"]{line-height:inherit;min-height:0} /* Tap targets apply on every touch screen, not only phones. An iPad in landscape is 1024px wide and still driven by a finger. */ @media(max-width:1024px),(pointer:coarse){ /* ── 2. Tap targets ── WCAG 2.5.8 asks for 24x24 as a minimum and 44x44 is the comfortable figure on a phone. Padding is used rather than height so nothing in a flex row is stretched out of alignment. */ /* Timeline dots. The theme sets width and height to 6px, so the visible dot stays 8px through background-clip while the padding makes the tap area 44px tall. Negative margin keeps the dots the same distance apart. */ button.tm-dot, .tm-dot{box-sizing:content-box!important; width:8px!important;height:8px!important;min-width:0!important;min-height:0!important; padding:18px 18px!important;margin:0 -8px!important;background-clip:content-box!important} .tm-arrow{min-width:44px!important;min-height:44px!important} /* lex-readability-v19c pins button.fm-mob-cta to 36px with !important at tag+class specificity, which a bare class cannot beat. Matched here. */ button.fm-mob-cta, .fm-half .fm-mob-cta{display:inline-flex!important; align-items:center!important;justify-content:center!important; min-height:44px!important;height:auto!important;padding:0 18px!important} /* Footer link rows: practice links sat at 31px tall, legal links at 24px. */ footer .lex-reach-links a{padding:12px 10px!important;display:inline-block!important} .lex-ft-copy a{padding:10px 4px!important;display:inline-block!important;line-height:1.6!important} .lex-ft-dev a{min-height:40px!important} /* Practice-areas situation chips at 33px, guide and testimonial links at 17 to 20px, the reviews button at 39px. */ .lex-sit-chip{min-height:40px!important;display:inline-flex!important;align-items:center!important} .guide-cta, .vt-cta{display:inline-block!important;padding:10px 0!important;min-height:40px!important;box-sizing:border-box!important} .gr-btn{min-height:44px!important} /* Seen at 768px on the homepage: filter pills 37px, timeline filters 25px, the estate evaluation button 33px, the insights link 39px. */ .pill, .tab-pill, .est-expand-btn, .view-all-link, .tm-filter{ min-height:40px!important;display:inline-flex!important;align-items:center!important} /* Unclassed buttons in the page body (office tabs at 35 to 37px, the newsletter button at 39px). The header is excluded so the hamburger and Explore button keep their measured layout; timeline dots are handled above. */ main button:not(.tm-dot), section button:not(.tm-dot), footer button{min-height:40px!important} /* Standalone text links that are direct children of a div (READ MORE, View on Google, Read All Reviews). Links inside paragraphs and list items are not direct children of a div, so running copy is untouched. */ body div > a:not([class]):not([href^="tel:"]):not([href^="mailto:"]){ display:inline-block;padding:8px 0;min-height:40px;box-sizing:border-box} /* The tel: and mailto: enlargement that used to sit here was removed in 8.45.0. See section 5 above: it turned inline phone numbers into 40px boxes inside 15px sentences. Standalone call buttons carry their own classes and are sized by the rules above this one. */ /* ── 3. The one real overflow ── .tab-pill has clientWidth 86 holding scrollWidth 158, so its own count badge sits 43px past the right edge of the screen. The pill row is not a scroller, so the content has to wrap instead. */ .tab-pill{max-width:100%!important;white-space:normal!important; display:inline-flex!important;align-items:center!important;gap:6px!important; flex-wrap:wrap!important} .pill-count{flex:none!important} /* ── 6. Body copy, sized for reading rather than for fitting ── lex-mobile-final sets p/li/dd to clamp(15px,4vw,17px). On a 375px phone 4vw resolves to 15px, so every paragraph on the site rendered at the bottom of that range. 15px is a caption size; 16px is the long-standing floor for body text on a phone and is also the size below which iOS Safari zooms a focused input. Raised, with the line-height opened up, because the complaint was as much about density as size. */ p, li, dd, blockquote{font-size:clamp(16px,4.3vw,17.5px)!important; line-height:1.7!important} /* ── 7. Dim text on navy ── Measured on the homepage: of 320 text nodes on dark backgrounds, 55 sat below 7:1. Gold accents are deliberately excluded, they are the brand. What is left is cream and blue-grey set at 0.65 to 0.86 alpha, which on #0F1E38 reads as grey rather than white. Raised to near-opaque. */ .lex-reach-areas a, .lex-az-footlink a{color:rgb(226,232,246)!important} .card-list li{color:rgba(236,234,247,.98)!important} .card-note, .gr-count, .vt-stat-label, [class*="stat-label"], .gr-atlas{ color:rgba(242,239,232,.95)!important} .ft-col-title{color:rgba(232,184,75,.95)!important} } /* Two overflows that only appear at 375px and narrower (an iPhone SE, Mini and most Android budget phones); at 390px both fit. */ @media(max-width:600px){ /* Timeline outcome pill is nowrap at 329px inside a 271px column. */ .tm-outcome{white-space:normal!important} /* The "Read Reviews | View on Google" row: fixed 72px height, 32px side padding, two letterspaced links that need 309px of a 243px content box. */ div[style*="height:72px"][style*="flex-end"]{height:auto!important;min-height:72px!important; flex-wrap:wrap!important;padding:8px 16px!important;row-gap:2px!important} /* Calculator cards in .tt-grid: lex-readability-v19c turns the card anchor into a flex row below 768px, so its four children (label, title, blurb, "Try it") sit side by side in a 264px card and the last one lands past the edge. Stack them. */ /* 8.50.41: the previous rule here fought the calculator-href rule in lexaltico-wp.php and lost on specificity, so these cards stayed a flex row with align-items:center and their first child was forced into a 40px circle. The eyebrow label ("Family Law") was squeezed into 40px and wrapped to two lines beside the title. Same fault as 8.50.18 and the [class*="rev"] match before it: a selector broad enough to catch what it was never aimed at. These cards are not .tool-tile, so that exclusion never covered them. Restore the block layout the markup was written for, at a specificity that beats the href rule, and across the same breakpoint it uses (768, not 600). */ /* The facts strip keeps a two-column grid (211px + 89px) at phone width and squeezes its heading into the 89px column. One column. */ .facts-strip-inner{grid-template-columns:1fr!important} .facts-strip-inner > *{grid-column:1 / -1!important} } /* Calculator teaser cards, same breakpoint as the href rule they must beat. */ @media(max-width:768px){ .tt-grid > a[href]:not(.tool-tile){display:block!important} .tt-grid > a[href]:not(.tool-tile) > div:first-child{ width:auto!important;height:auto!important;min-width:0!important; border-radius:0!important;display:block!important;flex-shrink:1!important} } /* 8.50.42 — two items from the full mobile render audit. 1. /all-pages/ A to Z jump bar. Measured 409px against a 375px viewport, and body carries overflow-x:hidden, so the last letters were clipped rather than scrollable: unreachable on a phone. Give the bar its own scroller, the same treatment the comparison tables already have. 2. Mega menu row type. The labels sat at 10px and their calls to action at 9px, on the control most phone visitors use to move around the site. No standard sets a minimum, but 9px is small for primary navigation. Lifted to 12px and 11px, which changes nothing else about the design. */ @media(max-width:768px){ .lex-az-jump{ overflow-x:auto!important; -webkit-overflow-scrolling:touch; scrollbar-width:thin; max-width:100%!important; } .mm-row-label{font-size:12px!important} .mm-row-cta{font-size:11px!important} } /* 8.50.46 — mega menu type at every width. The 8.50.42 fix was scoped inside max-width:768px, so desktop kept 9px on the control most visitors navigate with. Corrected here for all widths. An h4 rule shipped alongside this in 8.50.45 and is REMOVED. A rendered census reported ~45 H4 elements per page at 10.5px and I read that as a readability problem. It was not: every h4 on a page belongs to the legal popup, where the 10.5px ones are uppercase letterspaced labels and the 18px ones are its real headings. A blanket h4 rule inflated the labels and shrank the headings, and would also have overridden section h4 at clamp(16px,1.5vw,22px) down to 13px across the site. The measurement was right and the conclusion was wrong. */ .mm-row-label{font-size:12px!important} .mm-row-cta{font-size:11px!important} /* lex-nav-fix */ /* 1. The hamburger was clipped: #nav is 80px tall, .nav-in was 120px, so the button sat at top:-20px with 46% of it above the viewport. Constrain the inner row to the bar it lives in, and let the button centre itself inside it. */ @media(max-width:900px){ #nav{height:80px;overflow:visible} #nav .nav-in{height:80px;min-height:0;align-items:center} /* The real offender is the unclassed wrapper
holding the hamburger, the nav list and the Explore button. Measured live: it computed to height 120px with align-items:stretch, despite carrying an inline align-items:center, so something else is setting it with !important. Centred inside an 80px bar, a 120px child overflows 20px top and bottom, which put 20 of the button's 44 pixels above the viewport where they could not be tapped. Constraining .nav-in alone did not help, because the overflow happens one level further in. This targets the wrapper itself. Verified in a 375px viewport on the live site before shipping: wrapper top 0 height 80, button top 0, and both the Explore button and the logo still correctly placed. */ #nav .nav-in > div{height:80px!important;max-height:80px!important;align-items:center!important} #nav .nav-mob-btn{min-width:44px;min-height:44px;align-self:center!important; position:relative!important;top:0!important;margin:0!important} #nav .nav-explore-btn{align-self:center!important;max-height:62px} } /* 2. The list the hamburger opens now has content in it, so it needs to look like a menu rather than a 41px strip. Full-width panel below the bar, large targets. */ @media(max-width:900px){ #nav-links{display:none;position:fixed;top:80px;left:0;right:0; background:var(--navy4,#090F20);border-top:1px solid rgba(232,184,75,.18); flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px 0 10px; max-height:calc(100vh - 80px);overflow-y:auto;z-index:99; box-shadow:0 18px 40px rgba(0,0,0,.45)} #nav-links.nav-mob-open{display:flex} #nav-links li{list-style:none} #nav-links a{display:block;padding:15px 28px;min-height:44px; color:var(--cream,#F5F1EA);text-decoration:none; font-family:var(--sans,system-ui);font-size:15px;letter-spacing:.02em; border-bottom:1px solid rgba(232,184,75,.08)} #nav-links a:hover,#nav-links a:focus-visible{background:rgba(232,184,75,.08);color:var(--gold,#E8B84B)} #nav-links a[aria-current="page"]{color:var(--gold,#E8B84B); box-shadow:inset 3px 0 0 var(--gold,#E8B84B)} #nav-links .lex-nav-az{color:var(--gold,#E8B84B);font-weight:600;border-bottom:none} } /* 3. On desktop the list stays inline as it always did, but it now has content, so give it breathing room and a readable colour. */ @media(min-width:901px){ #nav-links{display:flex;gap:20px;list-style:none;margin:0 20px 0 0;padding:0} #nav-links li{list-style:none} #nav-links a{color:rgba(235,232,245,.9);text-decoration:none; font-family:var(--sans,system-ui);font-size:12.5px;letter-spacing:.06em; white-space:nowrap;padding:6px 0;border-bottom:1px solid transparent} #nav-links a:hover,#nav-links a:focus-visible{color:var(--gold,#E8B84B);border-bottom-color:var(--gold,#E8B84B)} #nav-links a[aria-current="page"]{color:var(--gold,#E8B84B);border-bottom-color:var(--gold,#E8B84B)} #nav-links .lex-nav-az{color:var(--gold,#E8B84B)} } @media(min-width:901px) and (max-width:1180px){ #nav-links a{font-size:11.5px;letter-spacing:.03em} #nav-links{gap:14px} } /* 4. A fixed 80px header was overlapping the first line of the H1 on /mortgage-enforcement-lawyer-ontario at phone widths. Guarantee clearance for any hero that starts hard against the top of the page. */ @media(max-width:768px){ main > section:first-of-type{scroll-margin-top:90px} main > section:first-of-type h1{padding-top:14px} } /* 5. Footer legal links were 17px tall. Below the 24x24 WCAG 2.5.8 floor. */ footer a{display:inline-block;min-height:24px;line-height:24px} /* 6. The A to Z index, moved out of the header in 8.31.0. Gold so it reads as the catch-all it is, rather than as one more item in The Firm column. */ footer a.lex-ft-az{color:var(--gold,#E8B84B);font-weight:600} footer a.lex-ft-az:hover,footer a.lex-ft-az:focus-visible{text-decoration:underline} /* 7. THE ROTATING WORD IN THE HERO EYEBROW. #h-tw carries an inline width:100%. Its parent .h-kick is display:flex with flex-wrap:wrap, and a 100%-wide flex child always claims a row to itself, so the rotating word dropped to a second line. Worse, the blinking cursor is drawn as border-right on that element, so on a full-width block the cursor painted at the far right edge of the screen while the text sat on the left. Measured at 390px before the fix: container 358px, #h-tw 358px, text ending at x=372 with the cursor at x=374, and the eyebrow 48px tall where one line is 20px. That is the "YOUR FA ............ |" that appeared on the phone. width:auto puts it back on the same line and the cursor hugs the text. The inline style has to be beaten with !important. */ /* The width fix lives in homepage.body.html, not here. That page carries its own #h-tw rule inside the body, which loads after this block, so an !important here loses the cascade to an !important there at equal specificity. Fixing it at the source is the only thing that actually works, and a second competing rule would just be noise. Only the cursor colour and the phone-width wrap stay below. */ .h-kick{flex-wrap:nowrap!important;min-width:0} .h-kick > span:last-child{min-width:0} @media(max-width:430px){ /* On the narrowest phones let it wrap as a whole word rather than clip. */ .h-kick{flex-wrap:wrap!important} #h-tw{white-space:normal!important} } /* 8.112.1. THE BUMP WHILE THE WORD TYPES (phones and tablets, Junaid). Below 900px the rotating phrase is meant to sit on its own line under "WE FIGHT FOR". It was only as wide as its text (fit-content), so a short phrase ("YOU", "AN") fitted on the first line beside "WE FIGHT FOR" and then dropped to the second line as it grew. "WE FIGHT FOR" jumped 12px each time, several times a cycle. Measured on live at 390px: the label moved between y=93 and y=104 and the phrase between line 1 and line 2. An invisible full-width item now always forces the break, so the phrase is always on line two, the cursor still sits against the last letter, and nothing above or below it moves. */ @media(max-width:900px){ #hero .h-kick{row-gap:0!important;align-content:center!important} #hero .h-kick::after{content:""!important;display:block!important;flex:0 0 100%!important;height:0!important;order:1!important} #hero .h-kick #h-tw{order:2!important;margin-top:6px!important;white-space:nowrap!important;max-width:100%!important} } /* 8. THE EXPLORE BUTTON RAN OFF THE RIGHT EDGE. Measured on the live site at 360px: logo 201px, hamburger 44px, Explore 88px, plus 16px padding each side. That needs 365px of a 360px viewport, so the button sat 3px off-screen and "The Firm" read as "The F". It is not caught by an overflow check because #nav is fixed and clips silently. Below 420px the logo gives up the width instead, because the logo is still legible at 170px and a half-visible button is not. */ /* The hamburger header runs from 0 to 900px, but the logo cap below only went up to 420px. Everything from 421 to 900 was uncapped, so the generic img{max-width:100%} took over and the wordmark grew to fill the header. That gap is not a corner case, it is the most common iPhone sold. Measured at 430px, the width of every iPhone Pro Max and Plus: logo 350 x 49 (81% of the screen) Explore button x424 to x472, clipped past the 430px edge nav content 472px inside a 430px viewport Junaid photographed exactly that: an oversized wordmark and no way to reach "The Firm". Every test I ran was at 360, 375 and 390, all of which sit under the 420px cap, which is why it never appeared. 200px keeps the wordmark comfortably legible while leaving room for the hamburger and the button. */ @media(max-width:900px){ #nav img{max-width:200px!important;height:auto!important;width:auto!important} /* The compact button already used below 420px, applied to the whole hamburger range so "The Firm" fits on a 430px iPhone as well. */ #nav .nav-explore-btn{padding-left:10px!important;padding-right:10px!important} #nav .nav-explore-main{font-size:11px!important;letter-spacing:.04em!important} /* "The Firm" to the left of the hamburger. The two buttons share an unclassed wrapper that a mobile rule sets to a wrapping column, so `order` has no effect on left/right there. Reversing the row does: the hamburger takes the far right edge and the button sits beside it, always fully on screen. Measured at 430px: Firm 300-362, hamburger 370-414, both centred in the 80px bar, logo unchanged at 200x28. */ #nav .nav-in > div{flex-direction:row-reverse!important;flex-wrap:nowrap!important; align-items:center!important;gap:8px!important;height:auto!important} } @media(max-width:420px){ #nav .nav-in{padding-left:12px!important;padding-right:12px!important} /* Match any image in the header, not one filename. The logo currently ships as constructive-dismissal-toronto-1.png which is a leftover name from another page. A selector keyed to that string stops working the moment the logo is replaced through the media library, and the failure is silent: the generic img{max-width:100%} takes over, the logo grows to the full width of the header, and the row wraps. The header holds exactly one image, so matching all of them is both simpler and safer. */ #nav img{max-width:170px!important;height:auto!important} #nav .nav-explore-btn{padding-left:10px!important;padding-right:10px!important} #nav .nav-explore-main{font-size:11px!important;letter-spacing:.04em!important} } @media(max-width:360px){ #nav img{max-width:148px!important;height:auto!important} #nav .nav-explore-main{font-size:10.5px!important} }