[Support request] How to create a sticky responsive ad on the bottom of screen

[Chaz]

Hi,

I tried to follow a few posts on the topic of this forum. I created a hook element to generate_after_footer, then I tried to add the following CSS, but it doesn’t work:

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

Any idea where I’m going wrong?

Page: https://djingpro.com/best-dj-controller/

[David]

Hi there,

try clearing any plugin and browser caches,

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

[Chaz]

Hi David, I did try that. Still not working. See screenshot: https://prnt.sc/RX5cUuRxo2UX

[David]

Where did you add the CSS ?

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

[Chaz]

In the Additional CSS within the Customize section here: https://prnt.sc/Bc1No-tf1LeX

[David]

Re-add the CSS to your site.
And then disable WP Rocket so we can take a closer look

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

[Chaz]

Ok, WP rocket switched to safe mode. Can you take a closer look?

[David]

I can see the CSS is there and working:

So looks like WP Rocket was messing with it. Try re-enabling it.

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

[Chaz]

I’m not seeing the sticky banner ad. I’m trying to replicate this: https://prnt.sc/yON5xwKrKa4l

[David]

Theres a chance that the container is collapsing and the advert script inside it is not calculating the size.
Change your CSS to:

.custom-ad-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 100px;
    background-color: #000;
}

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

[Chaz]

It was working but the alignment was not centered and the ad was too big. So I swapped the ad unit to something a bit smaller, but it still not sticky

[Ying]

Hi there,

Are we talking about this ads?
https://www.screencast.com/t/Mxz7QIar

If so, I don’t see a class custom-ad-container being added to it, so the CSS David provided here https://generatepress.com/forums/topic/how-to-create-a-sticky-responsive-ad-on-the-bottom-of-screen/#post-2385810 is not going to work, because it’s not targeting anything.

[Chaz]

Hi Ying, that is the ad I am trying to make sticky. So how do I get it to work?

[Chaz]

Ok, so I think I fixed it by adding the following tag within the hook element before the ad script.
<div align="center" class="custom-ad-container">

I then updated the additional CSS as follows

.custom-ad-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: auto;
    background-color: #232324;opacity:0.95;
}

Seems to be working now. See screenshot: https://prnt.sc/zADWB0FAqiLo

[Ying]

I just checked, it’s working now 🙂

[Author]

Posts