Welcome to WebmasterWorld Guest from 3.80.4.76

Forum Moderators: martinibuster

AdSense units don't respect CSS margin rules

     
1:02 am on Sep 3, 2019 (gmt 0)

New User

joined:May 19, 2015
posts: 4
votes: 0


I just noticed that on sites with "auto ads" enabled, auto-placed AdSense units don't follow CSS rules regarding margin or padding in mobile view. They display across the entire viewport instead of allowing margin. The issue is not really applicable on desktop because ads rarely run border to border down to the pixel. But it does interfere with the design of mobile pages. See example below.

  html{
padding:15px;
}

body{
margin:15px;
}




As you can see, the ad is sticking out outside the allowable margin on the left and the right, unlike the element above it. All elements on the page obey these rules except Google's AdSense units. Again, these ads are in "auto" mode, which means you place one line of javascript in the `<head>` section of your HTML, and Google's algorithms choose the sizing and placement of the ad units.

Is there a way to force margins on these units?
9:36 am on Sept 3, 2019 (gmt 0)

Senior Member

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

joined:Dec 12, 2004
posts:658
votes: 14


You can use data-full-width-responsive parameter to turn it off.

[support.google.com...]
10:02 am on Sept 3, 2019 (gmt 0)

New User

joined:May 19, 2015
posts: 4
votes: 0


Thanks! Those code modifications are for individual ad units though. Since I'm running auto ads, I need to figure out how to force those parameters on the page level.

data-full-width-responsive="true" is not something that can be enforced via CSS though. Maybe javascript?
1:39 pm on Sept 3, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4470
votes: 332


If the "data-full-width-responsive" parameter is not in your javascript, they offer instruction at the answers linked above. The "How to modify your responsive ad code" instructions: [support.google.com...]
1:47 pm on Sept 3, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2693
votes: 816


@not2easy that solution also wont work because we are dealing with auto-ads, where the ad code is insert dynamically by AdSense. The only code appearing on the page is a short script in the head.
7:28 pm on Sept 3, 2019 (gmt 0)

New User

joined:May 19, 2015
posts: 4
votes: 0


Yes, it would have to be custom javascript, and I'm wondering if that would even work. Please feel free to share the code if you can come up with it.
8:14 pm on Sept 3, 2019 (gmt 0)

Junior Member from CA 

10+ Year Member Top Contributors Of The Month

joined:Oct 1, 2002
posts:148
votes: 11


Try creating css class ".google-auto-placed ap_container{}" and add a margin or padding to it. May have to add an !important or 2....
8:40 pm on Sept 3, 2019 (gmt 0)

New User

joined:May 19, 2015
posts: 4
votes: 0


Thanks for the suggestion. Tried adding the following to the mobile css.


.google-auto-placed ap_container{
margin:30px !important;
padding:50px !important;
}


It had no effect. The problem is that each auto ad is a separate HTML page rendered in an iframe. So you have to grab each of them and apply the data-full-width-responsive=false rule to all of its child elements (or at least the important ones). That probably has to be done with javascript.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members