[Support request] Configuring Display Ads

[Grant]

Hello,

I am trying to show adverts on my website using a Hook Element. See here. I have added in the Ad Form code but:

• When I put in the code for desktop and mobile it duplicates the ads
• When I just use the desktop ad code, it is not responsive, i.e. it only shows half of the ad and it puts the leaderboard (top) ad to the far left.

Is it possible to make the ads display 100% and centred, and correctly for device (desktop or mobile)? Or should I just use an Ad Inserter Plugin?

[David]

Hi there,

if you use a Hook such as before_header or after_header – those will be Full Width.
If you want to keep the container width then add your scripts inside a HTML DIV with the grid-container and has-text-align-center classes eg.

<div class="grid-container has-text-align-center">
    Your advert script in here
</div>

This will keep the advert within the container and center it.

You can also add any of the GP hide-on-* classes to that container to:

https://docs.generatepress.com/article/responsive-display/

For example:

<div class="grid-container has-text-align-center hide-on-mobile">
    Your advert script for desktop and tablet 
</div>
<div class="grid-container has-text-align-center hide-on-desktop hide-on-tablet">
    Your advert script for mobile 
</div>

BUT… you should check with the advert provider regarding the size and the responsive behaviour with the advert. In theory you should only need the one script and it should select the appropriate sized advert for the device they are displayed on. I would check there first 🙂

[Grant]

Thanks, David. This helps a lot.

[David]

You’re welcome

[Author]

Posts