CODEWITHSUNDEEP
htmlresponsive-designadsense
Paul Jansen
Paul Jansen

Reputation: 1210

How to left align responsive adsense image ads?

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

enter image description here

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

enter image description here

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

Upvotes: 11

Views: 5365

Answers (11)

Robert Stevens
Robert Stevens

Reputation: 549

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>

Upvotes: 0

Gunawan T Wicaksono
Gunawan T Wicaksono

Reputation: 1

If you are using wordpress, you can do this:

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

Works for me

Upvotes: 0

Michiel
Michiel

Reputation: 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;}

Upvotes: -1

Gary
Gary

Reputation: 1

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.

Upvotes: 0

Amith Raj Shetty
Amith Raj Shetty

Reputation: 68

Original Ad

Custom Ad

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>

Upvotes: -1

Madalina Taina
Madalina Taina

Reputation: 1978

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>

Upvotes: 0

Rajesh kannan
Rajesh kannan

Reputation: 634

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

Upvotes: 2

codehelper
codehelper

Reputation: 29

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.

Upvotes: 2

Jacob
Jacob

Reputation: 2071

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.

Upvotes: 5

David Felipe Camargo Polo
David Felipe Camargo Polo

Reputation: 522

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');

Upvotes: 2

Mingle Li
Mingle Li

Reputation: 1350

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>

Upvotes: 2

Related Questions