How to left align responsive adsense image ads?

Question

I am using responsive adsense ads. By default, the text ads are nicely left aligned but the image ads have a very wide left margin for some reason. I can't get rid of it, even if I take the most simple page, i.e. a page with only an ad on it:

<!DOCTYPE html>
<html>
<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>
<!-- Responsive Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="xxx"
     data-ad-slot="xxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</body>
</html>

Textual ads are left aligned, e.g.:

but image ads contain some wide left margin, e.g.:

My question is how can I make sure that image ads are left-aligned?

I mean, `float: left` doesn't work? If not, do `margin-left: 0 !important` to see if that overwrites the huge margin... — Mingle Li, Aug 23 '15 at 22:31
@TheJuniorProgrammer, thanks. I tried both of your solutions in the css for "adsbygoogle". When using `float: left;` the ads are not shown any more and `margin-left: 0;` doesn't change anything. So this isn't the right solution. — Paul Jansen, Aug 23 '15 at 22:43
Could you make a [fiddle](http://jsfiddle.net) or a [pen](http://codepen.io/pen/) or just upload it to a webpage so we can see it? Plus, did you add `!important` to your `margin-left`? — Mingle Li, Aug 23 '15 at 22:46
@TheJuniorProgrammer, the problem is that I have to use/show my adsense codes then, which is not allowed. — Paul Jansen, Aug 23 '15 at 22:47
@TheJuniorProgrammer, for your information. I also added `!important`. — Paul Jansen, Aug 23 '15 at 22:52
Have you used firebug or developer tools and hovered over the image to see if it's actually got margin / padding? — Jay, Aug 26 '15 at 08:20
@Jay, according to the tools some nested iframe uses `left: 50%`. I can't figure out how to get rid of this. — Paul Jansen, Aug 27 '15 at 19:04
@Jay, no see my answer to the question of David Felipe below. — Paul Jansen, Aug 28 '15 at 12:45
@PaulJansen can you provide your website url where your adsense ads appear?? — Rohit Kumar, Sep 02 '15 at 04:01
Did you tried my solution below.. just give a try.. http://stackoverflow.com/a/32323867/2006386 — Rajesh kannan, Sep 04 '15 at 05:04

score 4 · Answer 1 · answered Aug 27 '15 at 09:06

4

Try putting it in a container and give the container a max-width and maybe text-align: left.

<!DOCTYPE html>
<html>
<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>
<!-- Responsive Ad -->
<div id="ad" style="width: 100%; max-width: 600px; text-align: left;">
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="xxx"
     data-ad-slot="xxx"
     data-ad-format="auto"></ins>
</div>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</body>
</html>

Hard to solve without having a test page that you can try playing with.

answered Aug 27 '15 at 09:06

Jacob

1,933
2
20
30

Unfortunately this doesn't help (with or without the "text-align"). The ads are shown, but the image ads still have a left margin. – Paul Jansen Aug 27 '15 at 18:19
Try padding-left: -x the amount. Its ugly, but it might work! – Jacob Aug 27 '15 at 18:20
1

The amount -x differs per device, so that isn't a robust solution. – Paul Jansen Aug 27 '15 at 19:13

score 2 · Answer 2 · answered Aug 23 '15 at 22:52

2

Try this - put your adsense code in a div, and style the div like this:

<div style="margin: 5px !important; float: left !important;"> 
    --Put your AdSense ad code here --
</div>

answered Aug 23 '15 at 22:52

Mingle Li

1,322
1
15
39

If I enclose the adsense ad in a div such as the one you propose, it is not shown any more. – Paul Jansen Aug 23 '15 at 22:57
@PaulJansen Oh man...Probably, as you said, the `float: left` is causing that, but I can't think of anything else you can do...Could you put up a screenshot?? – Mingle Li Aug 23 '15 at 23:50
I have added the screenshots to the original question. Please have a look. – Paul Jansen Aug 24 '15 at 21:21

score 2 · Answer 3 · answered Aug 26 '15 at 23:59

2

Maybe you can try to identify the DOM element that adsense create with the chrome developer tools(or try with the class in your ins tag) and in your code add some javascript to adjust the adsense as you wish for example you can do:

document.getElementsByClassName('adsbygoogle').style.cssFloat = "left";

if you prefer jquery you can do something like

$('.adsbygoogle').css('float','left');

answered Aug 26 '15 at 23:59

David Felipe Camargo Polo

502
4
7

Thanks David. We are getting close. According to the tools an iframe is used containing ``. If I change `left: 50%` to `left: 0%` and `margin-left: -364px` to `margin-left: 0px` in the tooling it works perfectly. The only thing that remains to be done is getting this work in my code. How? – Paul Jansen Aug 27 '15 at 19:08
You could detect when the ifram have content $(function(){ $('#ad_iframe').ready(function(){$('.adsbygoogle').css('float','left'); }); } and add the code that you want to fire in the callback – David Felipe Camargo Polo Aug 28 '15 at 21:13
I tried your solution, but unfortunately the ad is not shown any more then. I am afraid Google has made sure that it is impossible to manipulate their ads in whatever way. So I give up and just use the ads as they are provided. Thanks for your help. – Paul Jansen Aug 30 '15 at 22:41

score 2 · Answer 4 · answered Aug 31 '15 at 13:42

To limit the size and alignment of your ad, it needs to be in a container element such as a paragraph or div. Assign a class to the container element, put a max-width limit on the container for the responsive ad and left align the contents, all in your css.

score 2 · Answer 5 · answered Sep 01 '15 at 05:02

2

I have seen your webpage. And I have applied the following style

Try the following css in your file

.container {
padding-left:0px;
margin-left:10px;
}

Let me know if it is helpful

answered Sep 01 '15 at 05:02

Rajesh kannan

624
3
16

score 0 · Answer 6 · answered Sep 02 '15 at 05:33

Create a table with one row and two columns (or a div with display:table; propriety). Put your code inside the first cell. I think only single ads in a large block are centred. This example shows you how I see this:

<table width="100%" height="90" border="0" align="center">
    <tbody>
    <tr>
        <td>
            <ins class="adsbygoogle"
            style="min-width:400px;max-width:970px;width:100%;height:90px;left:0;margin-left:0;"
            data-ad-client="xxx"
            data-ad-slot="xxx"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        <td>
        <td>
        </td>
        </tr>
    </tbody>
</table>

score 0 · Answer 7 · edited Sep 09 '15 at 14:45

0

This seems to work for me, what do you think?

style="display:inline-block;max-width:728px;width:100%

Must add I'm a bit of newbie at any sort of coding, so please correct me if I'm wrong.

edited Sep 09 '15 at 14:45

Liam

27,717
28
128
190

answered Sep 09 '15 at 09:18

Gary

1

score 0 · Answer 8 · answered Oct 19 '16 at 17:12

0

If you are using wordpress, you can do this:

<div class="alignleft">
<! --- put your adsense code here -->
</div>

Works for me

answered Oct 19 '16 at 17:12

Gunawan T Wicaksono

1

score 0 · Answer 9 · answered Feb 27 '23 at 17:30

This works. The key is to use flex and justify-content:left which packs the adsense ad to the left. Replace the XXX with your adsense publisher ID and the YYY with your ad slot. You may also want to wrap this code in divs for a container, row and column.

<ins class="adsbygoogle" style="display:block;display:flex;justify-content:left;" data-full-width-responsive="true"
data-ad-client="ca-pub-XXX" data-ad-slot="YYY" data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

score -1 · Answer 10 · answered Sep 02 '15 at 05:56

If you are looking for the result as shown in the 2nd image from the first image, I can think of only below solution:

    <!DOCTYPE html>
    <html>
       <head>
         <script async       src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
       </head>
       <body>
   <!-- Responsive Ad -->
          <div class = "adClass" style = "float:left;">
             <div id="ad" style="width: 100%; max-width: 600px; text-align: left;">
             <ins class="adsbygoogle"
               style="display:block"
               data-ad-client="xxx"
               data-ad-slot="xxx"
               data-ad-format="auto"></ins>
             </div>
           </div>
           <div class="yourContent" style = "float:right">
           <span>Your content here.</span>
           </div> 
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
         </body>
       </html>

score -1 · Answer 11 · answered Dec 06 '15 at 10:16

-1

The only thing that works for me is:

<div class="admaxwidth">
    [your responsive ad code]
</div>

and in your .css:

.admaxwidth {max-width:728px;}

answered Dec 06 '15 at 10:16

Michiel

1
1

How to left align responsive adsense image ads?

11 Answers11