Google AdSense and Affiliate leaderboard banners not responsive on mobile

Hi @enurion,

Thanks for reaching us,

While checking you have disabled the Google Ads from the script. Only the ads area provided via the ColorMag theme is added on your end.

Could you please add the ads via the script so that I can check the issue and provide you with an appropriate solutions.

Regards

Hi Barsha,

Thank for your reply. OK, I have activated the google ad leaderboard banner now and will leave it on until you check it. It’s perfectly OK on PC. However on my homepage it is trimmed from the both sides on my iPhone 14 Pro Max and on my Redmi Note 11. If you open an article (no matter which one) the things get worse – the pages becomes shaky and the user would be able to move the screen while reading the article to the left and to the right while scrolling, because the banner stretches the page beyond the visible area of the phone’s screen.

Hi @enurion,

Thanks for enabling Google Adsense on your end. In order to fix the issue, please use the CSS inside WordPress Dashboard > Appearances > Customize > Additional CSS :

@media screen and (max-width: 768px){
ins.adsbygoogle{
width: 50%!important;
}
}

Let me know if this helps you or not and I will get back to you.

Regards

Hi. I did it, but the result doesn’t look the way I want it. The width becomes smaller, but height is now huge. I wish if the height stays the same or smaller than 90px.

I’m looking for a result that visually looks like the jpg banners look on mobile, like this one:

Is that possible? Maybe a CSS code that proportionally decreases the size of the 728×90 google ads banners without changing their ratio?

Hi Barsha, I just made two different google ads codes for 728×90 and 320×50 and put them together.

<!-- Desktop Ad Script -->
<div id="desktop-banner">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6568149107086945" crossorigin="anonymous"></script>
    <!-- Leaderboard 728x90 -->
    <ins class="adsbygoogle"
        style="display:inline-block;width:728px;height:90px"
        data-ad-client="ca-pub-6568149107086945"
        data-ad-slot="4661644598"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

<!-- Mobile Ad Script -->
<div id="mobile-banner">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6568149107086945" crossorigin="anonymous"></script>
    <!-- Mobile Banner 320x50 -->
    <ins class="adsbygoogle"
        style="display:inline-block;width:320px;height:50px"
        data-ad-client="ca-pub-6568149107086945"
        data-ad-slot="9348549395"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

Then made these CSS changes:

/* Default styles for both banners */
#desktop-banner, #mobile-banner {
    display: none; /* Initially hide both banners */
}

/* Media query for desktop screens */
@media (min-width: 768px) {
    #desktop-banner {
        display: block; /* Display desktop banner on screens larger than 768px */
    }
}

/* Media query for mobile screens */
@media (max-width: 767px) {
    #mobile-banner {
        display: block; /* Display mobile banner on screens 767px and smaller */
    }
}

Now I have two different banners on PC and mobiles. That’s ok for now. Thanks.

Hi @enurion,

Great to hear that the issue has been fixed. Let me know of any confusion or issues and I will get back to you.

Regards