AdSense units don't respect CSS margin rules

Forum Moderators: martinibuster

Message Too Old, No Replies

AdSense units don't respect CSS margin rules

Knocks

1:02 am on Sep 3, 2019 (gmt 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?

levo

9:36 am on Sep 3, 2019 (gmt 0)

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

[support.google.com...]

Knocks

10:02 am on Sep 3, 2019 (gmt 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?

not2easy

1:39 pm on Sep 3, 2019 (gmt 0)

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...]

NickMNS

1:47 pm on Sep 3, 2019 (gmt 0)

@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.

Knocks

7:28 pm on Sep 3, 2019 (gmt 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.

No5needinput

8:14 pm on Sep 3, 2019 (gmt 0)

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....

Knocks

8:40 pm on Sep 3, 2019 (gmt 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.