Center Align Adsense Ad on Desktop/Mobile

  • Resolved thedermdetective

    (@thedermdetective)


    3 years, 2 months ago

    Hello AdInserter,

    I reviewed the existing forum threads on center align, but I did not see a solution to my problem.

    I noticed that using AdInserter’s default CSS code for Alignment: Center (e.g. “margin: 8px auto; text-align: center; display: block; clear: both;”) does not actually center align my ads – I have tried on both Chrome and Edge. Strangely, in the Preview tab of AdInserter, the Adsense Ad is centered but just not in Chrome/Edge.

    The ad in question is named “<!– Desktop – After Shop Now – 728×90 –>” and shows up after each “Shop Now” button on the reference URL. Remote debugging is enabled.

    I read that Google’s guidance is to use align=”center” within the ad <div> but I’m not sure how to implement this via AdInserter’s CSS as the “” are removed after saving.

    https://support.google.com/adsense/answer/9190028

    Thanks,
    Tom

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Spacetime

    (@spacetime)

    3 years, 2 months ago

    Try to add this code to block 4:

    <style>
.ai-viewport-1 {
    display: block !important;
}
</style>
    Thread Starter thedermdetective

    (@thedermdetective)

    3 years, 2 months ago

    Thanks, this worked. I tried this same code for my Mobile only ad block but it did not center the ad unit. Do I need a different code for that one?

    It is Block 7 – Mobile – 300×250.

    Thanks,
    Tom

    Plugin Author Spacetime

    (@spacetime)

    3 years, 2 months ago

    Mobile ads are full-width so centering is not needed.

    Nevertheless, use this approach for all devices.
    Put the following code in the header

    <style>
.ai-viewport-1, .ai-viewport-2, .ai-viewport-3 {
   width: 100%;
}
</style>

    and remove that extra code from block 4.

    https://adinserter.pro/documentation/header-and-footer-code

    Thread Starter thedermdetective

    (@thedermdetective)

    3 years, 2 months ago

    Thanks, I added the code and it seems to work when I use Chrome to view a mobile device.

    However, when I tried using a real mobile device, the ads were not centered – I tried both iPhone/Safari and Android/Chrome combinations.

    iPhone screenshot: https://drive.google.com/file/d/19qDQZ77JDmmSL4bejHHuUVhWla_ODkYU/view?usp=sharing

    Android screenshot: https://drive.google.com/file/d/15lv6ugXxBUgQuryDtGN-GsQ-Pwm9pd7t/view?usp=sharing

    Do you have any suggestions to fix this on real mobile devices? I don’t know why it is different from Chrome’s mobile device simulator.

    Thanks,
    Tom

    Plugin Author Spacetime

    (@spacetime)

    3 years, 2 months ago

    Are you sure the phone loaded the updated page and not a cached page?

    Have you flushed the cache in the browser?

    Thread Starter thedermdetective

    (@thedermdetective)

    3 years, 2 months ago

    Hi, yes I just tried again on both iPhone and Android mobile devices. I cleared cache and cookies and still the same result.

    So the ad is rendering correctly but because it is smaller than screen size (300×250 but iPhone 11 is 414px wide), the ad shows up left-aligned instead of centered. Just wanted to clarify that part.

    Do you get the same result?

    Thanks,
    Tom

    Plugin Author Spacetime

    (@spacetime)

    3 years, 2 months ago

    I would remove url parameter ?client=ca-pub-4341367926774754 from

    all ad codes
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4341367926774754" crossorigin="anonymous"></script>

    as it seems it creates Javascript errors.

    adsbygoogle.push() error: Only one AdSense head tag supported per page

    I would also suggest to remove width and height from phone ad codes so the responsive code would resize the ads to the width of the screen.

    Thread Starter thedermdetective

    (@thedermdetective)

    3 years, 2 months ago

    Great, thank you for your help, Spacetime!

    So somehow I got it working now, after enabled “Center” in the ad unit AND using the header code that you provided previously. I removed the URL parameter as advised as well.

    Thanks!!!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Center Align Adsense Ad on Desktop/Mobile’ is closed to new replies.