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

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

Home Forums Support Sticky Ad At The Botton Of The Page

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1612710
    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 😊

    #1612925
    David
    Staff
    Customer Support

    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 */
    }
    #1625809
    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

    #1625811
    Elvin
    Staff
    Customer Support

    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?"

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

    #1625834
    Elvin
    Staff
    Customer Support

    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?"

    #1625844
    Jose

    Hello

    I am very happy with the result

    Thanks for your support.

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

    #1625873
    Elvin
    Staff
    Customer Support

    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?"

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