Google Adsense and CLS issues

[Mopar1973Man]

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?

[Mopar1973Man]

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, 2021 by Mopar1973Man