OPS-014
The CSS that silently breaks pasted ad code
Your ad slot stored and echoed the code perfectly. overflow:hidden, max-width and height:auto then clipped, rescaled and collapsed it.
An operator reports that their banners look wrong — clipped, squashed, or showing a sliver of a creative. The natural assumption is that the code was mangled on save, and it was not: it was stored and echoed verbatim.
The damage is CSS on the slot. height: auto on an iframe collapses a fixed-height creative. max-width: 100% rescales a 728-wide banner into a 300-wide column and the network's own markup does not expect it. overflow: hidden crops whatever is left.
The fix is to style the container and leave the contents alone — with one deliberate exception for responsive scaling, which has to be done by transform rather than by overriding the iframe's dimensions.
/* The slot: a box that does not touch what is inside it. */
.adslot {
display: block;
margin: 18px auto;
text-align: center;
/* No overflow, no max-width, no height — the creative decides. */
}
/* Reserve the height so a slow network does not shift the page. */
.adslot[data-size="728x90"] { min-height: 90px; }
.adslot[data-size="300x250"] { min-height: 250px; }
/* Scaling for narrow screens WITHOUT rewriting the creative's own box:
shrink the whole thing visually, and reserve the scaled height. */
@media (max-width: 760px) {
.adslot[data-size="728x90"] {
min-height: 44px; /* 90 * 0.49 */
}
.adslot[data-size="728x90"] > * {
transform: scale(0.49);
transform-origin: top center;
}
}
/* What NOT to do — each of these breaks real ad markup:
.adslot { overflow: hidden; } clips wide creatives
.adslot iframe { height: auto; } collapses fixed-height iframes
.adslot iframe { max-width: 100%; } rescales the frame, not the creative
.adslot * { box-sizing: border-box; } changes the network's own layout
*/Using it
When an operator says the ads look wrong, check the stylesheet before the storage path. Verbatim storage is easy to verify and is usually not the problem.
A global reset that targets iframe or * reaches inside ad slots too. Scope resets away from the slot.
Test with a real network's code, not a placeholder image. Placeholders behave; real creatives do not.
What bites people
transform: scale leaves the original space reserved unless you set the height yourself, which is why the media query sets both.
Some networks inject a wrapper with its own inline styles. Fighting it with !important usually breaks something else; leave it alone.
A creative that renders fine in isolation and breaks in your page is nearly always your CSS, not theirs.