/| out to 525px, so fixing
it pulls those back on its own. Sole offender on AYS.
.SearchPrefs width:525px (default.css:1683) -> the tab row's
last tab (#classifiedtab) reached 542px, which is what actually set
Bergen's scrollWidth. .life only -- AYS never renders this row
(#SearchPrefs sits inside `if session("LockCategory")=""`).
max-width keeps the 525px design width wherever it fits and only shrinks
below it, so nothing changes on phones wide enough for the original.
box-sizing is required: .searchtextboxNewHome carries a 1px border plus
padding-left, which would otherwise push a width:100% box back over the
edge. The autosuggest panels are pinned too -- they compute to 600px and
would overflow the moment they are shown. */
body .searchtextboxNewHome{
width:100% !important;
max-width:525px !important;
box-sizing:border-box !important;
}
body .SearchPrefs{
width:100% !important;
max-width:525px !important;
box-sizing:border-box !important;
}
/* The tab row is the ROOT cause on .life, and capping its width alone does
not fix it: width:100% resolves against the PARENT, and the parent | is
itself stretched by the overflowing row, so the cap just re-applies 525px
(measured: parent 542 -> row 525 -> still scrolling). The row has to be
made to FIT.
Its six tabs total ~442px of text at 20px; what pushes it to 542 is the
five inline `margin-left:20px` gaps (100px) each tab carries. Zeroing them
leaves 442px inside a 468px viewport, and .SearchPrefs is already
display:flex + justify-content:space-between (default.css:1095), so the
~26px of slack is redistributed as even gaps -- all six tabs stay on ONE
line at the full 20px Bergen size, nothing wraps, nothing is cut off.
Chosen over shrinking the font (would break the 20px size the user picked)
and over flex-wrap (would drop the row onto two lines).
Inert on AYS -- those sites never render #SearchPrefs. */
body .SearchPrefs > span{
margin-left:0 !important;
}
body #TSsearchResult,
body #TSsearchForResult{
max-width:100% !important;
box-sizing:border-box !important;
}
/* NOT touched on mobile, on purpose:
- the AYS CSS-text wordmark (19px brand + 13px tagline, default.asp:1103)
already renders ~35px tall vs Bergen's 37px image logo, and that size is
the 2026-08-09 "shrink the AYS mobile header ~40%" ask;
- .flexslider padding-top / .mainDivExplore margin-top -- those position
the hero IMAGE, not the text above it, and carry the 2026-08-09
"reduce whitespace above the hero by 50%" ask. */
}
|