What is the best way to handle Google Adsense CLS? I'm fighting to keep my ads the way they are laid out but the Content Layout Shift is greater than 0.25. How can I give space for the Ads with out making padded space too big for mobile or too small for desktop or just making a mess out of the layout. I did find some google code in the CSS side but it doesn't seem to be working possibly being my layout shift is too high yet.

This is under Core > Global > global.css 

/* GOOGLE AD CODE FOR RESPONSIVE ADS */
#ipsLayout_mainArea .adsbygoogle { width: 320px; height: 100px; }
@media (min-width:500px) { #ipsLayout_mainArea .adsbygoogle { width: 468px; height: 60px; } }
@media (min-width:1050px) { #ipsLayout_mainArea .adsbygoogle { width: 728px; height: 90px; } }

What do I have to do make this work correctly and reduce the CLS?

Never mind I figured it out...

Here is what I replaced it with and Now I'm done some testing and got the CLS value down to 0.1 or lower on some pages. Also added the centering CSS code to center the ads in the layout.

/* GOOGLE AD CODE FOR RESPONSIVE ADS */
#ipsLayout_mainArea .adsbygoogle { 
  width: 320px; 
  height: 150px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width:500px) { #ipsLayout_mainArea .adsbygoogle { width: 480px; height: 300px; } }
@media (min-width:800px) { #ipsLayout_mainArea .adsbygoogle { width: 780px; height: 300px; } }
@media (min-width:1050px) { #ipsLayout_mainArea .adsbygoogle { width: 1040px; height: 300px; } }

 

Edited February 9, 20214 yr by Mopar1973Man

Update for version 5.x.x Invision for Gooigle Adsense code work and dropping from 0.44 CLS to 0.01 CLS.

CUSTOM CSS

This will set up the google Adsense so it reserves the page for the ads to be displayed properly. Add this code to your Custom CSS area in the theme section.

/* GOOGLE AD CODE FOR RESPONSIVE ADS */
#ipsLayout__main .adsbygoogle { 
  width: 320px; 
  height: 150px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width:500px) { #ipsLayout__main .adsbygoogle { width: 480px; height: 300px; } }
@media (min-width:800px) { #ipsLayout__main .adsbygoogle { width: 780px; height: 300px; } }
@media (min-width:1050px) { #ipsLayout__main .adsbygoogle { width: 1040px; height: 300px; } }

GOOGLE ADSENSE HTML CODE

You add the DIV tag around your Google Adsense code.

<div id="ipsLayout__main" class="adsbygoogle">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
     crossorigin="anonymous"></script>
<!-- Header Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>