[Support request] Sticky Ad At The Botton Of The Page

[Laksh]

I have recently purchased Generatepress premium theme. So I am new to it. Actually, I wanted to add an advertisement at the bottom of my webpage. This is how currently I have set it up using some plug-in – Image
But I want it to align at the center. Also, I want to do this without using some sought of a plug-in. Summarizing it, I want a sticky ad at the center at the bottom of my webpage. If you can help, then I would be much grateful. Thank you 😊

[David]

Hi there,

you can add your Advert code to a Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Wrap you code inside a <div> element with the grid-container class to keep it aligned with the page container ie.

<div class="grid-container custom-ad-container">
<!-- Your ad placement code goes here -->
</div>

Select the generate_after_footer hook
And set the Display Rules to the entire site.

Then add this CSS to your site fix the advert to the bottom of viewport:

.custom-ad-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 0;
}
body {
    margin-bottom: 200px; /* Adjust this value to the height of your advert */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jose]

Hello

I followed the instructions given.

I added an adsense unit which has a width of 728 and a height of 90 so I don’t expect the ad to be displayed from side to side.

Is there a way I can center the ad using custom css?

This is how the ad looks https://prnt.sc/x9krby

Thanks

[Elvin]

Hi Jose,

Is there a way I can center the ad using custom css?

It should be possible. But we’ll have to check the site to see what CSS selectors the ads use.

Can you link us to the site in question?

If you prefer to keep it private, can you open a new topic? So you can use the private information text field to provide your site url. Thank you.

A wise man once said:
"Have you cleared your cache?"

[Jose]

Hello

Thanks for the quick answer

This is my site, https://englishpost.org/

Please check the homepage only (I am using CF full page caching so the rest of the site is not showing the most updated version of it)

https://prnt.sc/x9neir

Thank U

[Elvin]

This CSS should horizontally center the ad placement.

.custom-ad-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    height: fit-content;
}

As for the bottom gap: if you want it removed, add this CSS:

.custom-ad-container ins.adsbygoogle {
    display: block !important;
}

A wise man once said:
"Have you cleared your cache?"

[Jose]

Hello

I am very happy with the result

Thanks for your support.

[Jose]

My Last noob question

I was checking other forum posts and I got the impression that I can hide an element on Mobile, Tablet or Desktop using hide-on-classes

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Can I stop that bottom sticky ad from displaying on mobile and tablet?

If so, How do I do that? Like this?

<!– Your ad placement code goes here –>

Thank U

[Elvin]

GP has these classes built in:

hide-on-desktop
hide-on-mobile
hide-on-tablet

Can I stop that bottom sticky ad from displaying on mobile and tablet?

If you can add in CSS classes, you can add hide-on-mobile if you want it hidden on mobile, and hide-on-tablet if you want it hidden on tablet.

Else, you’ll have to write your own @media query for the elements you want to hide on different viewports.

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts