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

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

Home Forums Support How to create a sticky responsive ad on the bottom of screen

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #2385671
    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/

    #2385698
    David
    Staff
    Customer Support

    Hi there,

    try clearing any plugin and browser caches,

    #2385721
    Chaz

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

    #2385725
    David
    Staff
    Customer Support

    Where did you add the CSS ?

    #2385753
    Chaz

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

    #2385782
    David
    Staff
    Customer Support

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

    #2385790
    Chaz

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

    #2385796
    David
    Staff
    Customer Support

    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.

    #2385803
    Chaz

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

    #2385810
    David
    Staff
    Customer Support

    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;
    }
    #2385881
    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

    #2386116
    Ying
    Staff
    Customer Support

    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.

    #2386154
    Chaz

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

    #2386223
    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

    #2386321
    Ying
    Staff
    Customer Support

    I just checked, it’s working now 🙂

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.