I googled this, and the suggestions that came back were JS solutions. Preferring a simpler life, I've gone with this:

.advert-holder {
    width: 728px;
    height: 90px;

.adblock-message {
    position: absolute;
    padding: 1.5em 1em;
    text-align: center;
    animation: fadeinwithdelay 2000ms

@keyframes fadeinwithdelay {
    0%   { opacity: 0 }
    80%  { opacity: 0 }
    100% { opacity: 1 }

And then

<div class="advert-holder">
    <span class="adblock-message">It looks like you're using an advert blocker, yada yada</span>
    ## google advert code here ##

The google advert overlays the text once it's loaded, and the text doesn't show for the first 1600ms, so there's not a flash of it before the google advert has loaded.

I like the simplicity (no JS), and it seems to work fine for me. Are there edge cases I might not have considered though? Any other cons of this approach?

  • Sometimes Google may not have an ad to display on the slot. In such cases, this message will be shown to genuine users. Jun 24, 2021 at 10:30


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.