Search code examples
javascripthtmlcssadsadsense

Hide Google Ads while printing the page

I am trying to use window.print to print a single image on my page.

That's the image user is interested to print.

Before putting ads on my website everything was working fine but after starting adsense ads while printing the page the print preview page shows the ads too.

How can i hide them ?

before i hide all the elements by css code which looks like below but now as i won't be able to know how and where an ad is placed as ad is auto.

@media print {
    @page {
        margin: 0;
        margin-top: 10px;
    }
    nav, header, .cardButtonRow, #about, .toastContainer, footer, .adsbygoogle, .google-auto-placed {
        display: none;
    }
    .cardImage img {
        width: 82%;
        box-shadow: none;
    }
}

The page structre mostly

<body>
<nav>....</nav>
<article class="container cardContainer">


        <header>
            <h1>Your eCard is Ready to Print</h1>
            <p>Save it or Print it !</p>
        </header>

        <div class="cardImage">
            <img alt="">
        </div>

        <div class="cardButtonRow">
            <a class="button" onclick="printClick();">Print Card</a>
            <a class="button">Download</a>
        </div>

...
<footer>...</footer>
</body>

How to print only the image ?

Solution

  • How about something like this:

    @media print {
    @page {
        margin: 0;
        margin-top: 10px;
    }
    * {
        display: none !important;
    }
    html, body, article, .cardImage, .cardImage img {
        display: block !important;
    }
    .cardImage img {
        width: 82%;
        box-shadow: none;
    }
}

    Hide everything, then un-hide the image and its ancestors.