adsense code with hooks

[Immi]

I’m using Adsense banner with GP hooks at Before Content.
The ad appears large in mobile devices. I want to display it small for mobile devices. The desktop view appears, ok.
can you provide me CSS code for smaller ad banner

[David]

Hi there,

you would need to set that up within the Adsense advert itself – there should be responsive options.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Immi]

Hello, David sir I have selected responsive in Adsense but still showing bigger.
it’s possible to make smaller by CSS code for mobile devices

[David]

Could you link me to a post where i can see the Advert?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Immi]

https://www.androidspd.com/download-spd-tool

yes, Sir,

I have attached a screenshot.

[David]

There isn’t much we can do about this – Adsense detects the size of the device and serves up a file to fit that size.

The most we can try is to wrap the Adsense code inside a div with a CSS class that we can set the width of:

<div class="ad-container">
Your adsence code here
</div>

Then this CSS which will ad some left and right padding on mobile to reduce the content width available:

@media (max-width: 768px) {
    .ad-container {
        padding: 0 30px;
    }
}

Not sure if it will help but thats about as much you can do – you cannot style content using CSS that comes from a 3rd party server.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Immi]

Sir, I have placed this code in GP hook-like this:
can you have a look this is ok

<?php if ( is_page() || is_single() ) : ?>
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script&gt;
<!– Header add –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-7341502470185310″
data-ad-slot=”9397554313″
data-ad-format=”auto”
data-full-width-responsive=”true”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<?php endif; ?>

[David]

That is correct – although if you want you can remove the if conditional ie.

<?php if ( is_page() || is_single() ) : ?> …. <?php endif; ?>

And use the Display Rules in the Hook Element to set it to display on Pages and Posts

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Immi]

Thank You David Sir,

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts