1. Home
  2. Forums Index
  3. Browser Side / Mobile Web Site Design and Development 11:51 pm May 20, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

could this be an html or css problem with responsive ads not working

         

Jorge1211

1:47 am on May 26, 2016 (gmt 0)

5+ Year Member



Hello,

Please help. I dont know if this is an html or css problem. but....

The problem that I am having is that when I insert the google responsive ad code into the html of the weebly html/css theme page,… this happens:

-The 1st top ad shows up perfectly on desktop and perfectly on mobile,

-But then the 2nd ad (mid page) shows up with 728x90 ad and cannot fit into that space so it ads a scrollbar on desktop but looks perfectly on mobile.

-And the 3rd ad (end of page) shows up with a 728x90 ad with scrollbar on desktop but perfectly on mobile.

But… when I hit refresh I then get the full ads for all 3 google ads perfect on desktop and perfect on mobile.

But when I see the page again, a new time, I keep seeing the scrollbar for the 2nd and 3rd ad, until I hit refresh again.

It seems that the responsive ad is trying to fit a 728x90 ad into the 336 ad space rather than a 336 or 300 size ad.

1st ad shows up perfect on desktop and perfect on mobile but 2nd and 3rd ad seems like the adsense responsive ad code is trying to fit a 728x90 banner into that space and thus creating a scroll bar.

But when I hit reload, refresh, the ad displays correctly as a 336x280 or 300x250 ad.

I searched, read and implemented google’s trouble shooting instructions on this issue but it didn’t work for my site, and I was assuming that other weebly customers may have had this problem with google responsive ads as well and where able to maybe add some type of additional code to correct the problem.

If you or anyone out there understands why this is happening, (code trying to fit a 728x90 ad in that 336 space and thus creating the scrollbar showing up on google responsive ads until you hit refresh), and may know of or have been able to find a solution to this problem then please let me know. I would appreciate yours or anyone’s help on this very important matter very much. Thank you. And have a great day.

jorge

[edited by: not2easy at 4:32 am (utc) on May 26, 2016]
[edit reason] TOS edit [/edit]

not2easy

4:35 am on May 26, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Hello Jorge1211 and welcome to the forums. I found that weebly has their own tools to format and position AdSense Ads, I would try there first.

Jorge1211

4:50 am on May 26, 2016 (gmt 0)

5+ Year Member



thanks for the reply not2easy... I did try Weebly's google drag and drop adsense tool but unfortunately it does not give you the option to insert googles new responsive ads... it only allows you to insert standard google ads, 336, 300, 728, 160 etc... so I have to just drop and drag the html element tool onto the page and insert the google responsive code my self.

the top ad works fine, its just the bottom 2 ads that dont display correctly and I dont understand why or how to fix. but thanks for the reply. I appreciate it.

not2easy

5:35 am on May 26, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



The sometimes frustrating limitations on drag and drop site building is what first sent me off to learn how to build from scratch. Drag and drop is a great way to build a site quickly but to have control over your content and its presentation it can fall short of ideal.

AdSense depends on reading the css to choose what ad size to display for responsive ads. If size is unclear for different screen sizes it may confuse things. It is also important to be sure that you have a viewport setting in your pages' <head>. When you view the source of your page, can you see the viewport setting?

Jorge1211

6:08 am on May 26, 2016 (gmt 0)

5+ Year Member



yes. i see the viewport tag

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

what i dont seem to understand is why would it first try to stick a 728x90 ad in there but then after a few refreshes, reloads it then puts a 336x280 ad in there the way it should be from the start. so apparently it does seem to read it correctly after a few reloads.

not2easy

6:55 am on May 26, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Possibly because the tools that set the dimensions for the ad containers and then adjust those containers' size for mobile viewing might be supplied via javascript? I am only guessing because wysiwyg design often uses proprietary scripts to determine the size of the screen and then serves css based on device. AFAIK only the suppliers of weebly's tools could tell you for certain.

martinibuster

5:17 pm on May 26, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



It seems that directly editing the HTML is possible on Weebly [webnots.com]. So rather than use the weebly tool the OP should simply copy the current code and strip out the styles etcetera so that it's just
<div>adsense code</div>


I'm 99% positive the AdSense code will work like that.

It's probably the style that's being applied to the DIV that's causing the problem. Remove the width and overflow properties and see what happens. The AdSense ad should be free to be what it wants to be without being changed by the constraints placed on by the width and overflow properties. The left alignment will probably deprecate in mobile and simply show the ad above or below a paragraph.

Rather than post a link to your site you should have just posted an exemplified version of the code, with all specifics stripped out, like this:

Original version that's causing trouble:

<div><div id="xxxxxxxxxxxxxxxxx" align="left" style="width: 100%; overflow-y: hidden;" class="xxxxxxxxxxx"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>


Becomes


<div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>


If you really want to have it align left then add inline CSS to accomplish that, you can even add padding to it so that the content flows around the AdSense ads. Don't use align=left.

Marshall

5:35 pm on May 26, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



If you are testing the ads by simply resizing a browser window, they will not adjust. They set to the initial window size. You have to refresh the page manually.

Jorge1211

8:00 pm on Jun 1, 2016 (gmt 0)

5+ Year Member



@martinibuster thanks for your help. I appreciate it.

Tried the <div> mentioned above but unfortunately it didnt work.

I did however assign a "width" in the <div> of 336px and it did display a perfect 336x280 responsive ad on desktop but displayed a not so perfect ad on mobile to where you had to scroll a tiny bit to see the whole ad.

Strange thing is that sometimes, a can come to a page the next day without refreshing and it displays perfect 336x280 ads all the way down the page and perfect ads on mobile as well. Still not sure why it works perfectly sometimes, (very few) and not so perfectly most of the time, other than the top responsive ad which works perfectly all the time on desktop and on mobile.

Jorge1211

8:17 pm on Jun 1, 2016 (gmt 0)

5+ Year Member



Also, I did find that the edited script below did help me to display perfect 336x280 ads on desktop but displayed a tiny tiny bit larger than normal on mobile to where you had to scroll just a tiny tiny bit to see the whole ad, but did display most of the ad just fine. May try to mess with it again see what happens. 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- XXADNAME -->
<ins class="adsbygoogle"
style="display:inline-block;min-width:300px;max-width:336px;width:100%;height:280px"
data-ad-client="ca-pub-XXXXXXXXXXXX"
data-ad-slot="XXXXXXX"
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

[edited by: not2easy at 9:38 pm (utc) on Jun 1, 2016]
[edit reason] enclosed raw script [/edit]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / Mobile Web Site Design and Development 11:51 pm May 20, 2026