Archived topic
How to create a sticky responsive ad on the bottom of screen
14 replies · Started by Chaz on October 25, 2022
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?
Hi there,
try clearing any plugin and browser caches,
Hi David, I did try that. Still not working. See screenshot: https://prnt.sc/RX5cUuRxo2UX
Where did you add the CSS ?
In the Additional CSS within the Customize section here: https://prnt.sc/Bc1No-tf1LeX
Re-add the CSS to your site.
And then disable WP Rocket so we can take a closer look
Ok, WP rocket switched to safe mode. Can you take a closer look?
I can see the CSS is there and working:
https://www.screencast.com/t/0vJVbs0N0uQ
So looks like WP Rocket was messing with it. Try re-enabling it.
I'm not seeing the sticky banner ad. I'm trying to replicate this: https://prnt.sc/yON5xwKrKa4l
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;
}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
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.
Hi Ying, that is the ad I am trying to make sticky. So how do I get it to work?
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
I just checked, it's working now :)
