Responsive Adsense Ads not formatting properly in header

I’ve got a responsive ad in my header on my site www.marketingartgallery.com

I recently switched it to an advanced format so that I could limit the ad’s size in order to consistently stay within google’s limit of only having one “large” ad on any single page.

My issue currently is that ads will format well some times on mobile and other times ads will extend to a width that is beyond the width of the screen. This seems completely counter to the notion of ads being “responsive”.

Any help you can offer would be much appreciated

Here’s what my header looks like:

<html class="no-js" lang="en-US"> <!--<![endif]-->
<head> <center>
<style>
.responsive-header-1 { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-header-1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive-header-1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive Header 1 -->
<ins class="adsbygoogle responsive-header-1"
     style="display:inline-block"
     data-ad-client="ca-pub-4585746277316949"
     data-ad-slot="8983612510"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></center>

here’s a picture of the improperly formatted ad that i’ve occasionally seen on mobile

Screenshot

Don’t se any issues with responsive ads on your website.

When testing responsiveness using desktop browser you need to refresh browser each time you resize browser screen size for testing as new banners are not loaded each time your device screen size is changed. Otherwise I don’t see any issues with ads on your website.

i’ve since moved the top ad below the header. But i noticed that the specific ad that caused me problems in the example i posted in the original post still causes problems (but only in mobile). It doesn’t mess up my content, but it allows the reader to scroll the page to the right to read the rest of the ad.

My thought was that a responsive ad would not dictate width, but rather respond to it.

If this is the only bug my site has on mobile, i’ll live.

ok - just noticed something.

Is there a way for me to set a minimum width for my sidebar in this theme?

I started using a medium rectangle from adsense and i noticed that it got cut off when i shrank my browser below a certain size. I do not like that.

I was reading some content on mashable, which has responsive design, and their sidebar never got smaller than their ads. When the screen wasn’t large enough to fit the ads, the ads dropped below the content - but at no point were the ads ever cut off.

I would love to have that with this theme. Is there a way to do that?

Just set minimal width for sidebar and you are ready to go.

.well {
    min-width: 360px;
}

i’m a complete noob. Where would I put that code?

Theme Options - Other - Custom CSS field. Or inside Child Theme style.css if you use one.

IT WORKED!!!

HOORAY!!!

:smiley: :smiley: :smiley: :smiley: :smiley: :smiley: