A scan box on mobile was laying out incorrectly. Its CSS used a flex-shorthand rule inside a column-direction flex container, and instead of controlling width the way it does in a row layout, it was effectively behaving like a height constraint. The instinct was to keep adjusting the flex values directly, assuming the right numbers hadn’t been found yet.
⚡ Quick Fix (TL;DR)
The Culprit: The real conflict wasn't inside the element's own rule at all — a sitewide snippet had !important rules overriding page-level CSS for this class on every page that shared it. No amount of local tuning could win against that.
The Fix: Rather than escalating the specificity fight, the element was renamed from a shared class prefix to a page-specific one, sidestepping the conflict entirely. That fix then exposed a second, unrelated bug underneath: with layout now correct, the form's submit button stopped working because its JS handler referenced an element ID that didn't exist — a bug that had been there all along, masked by the layout bug sitting on top of it.
Rather not untangle this yourself? Our Done-For-You team handles exactly this kind of thing, start to finish.
See DFY options → Was this helpful? Thanks for the feedback!
Tagged in :