- This topic has 8 replies, 4 voices, and was last updated 3 years, 3 months ago by Elvin.
-
AuthorPosts
-
January 9, 2021 at 9:01 pm #1612710Laksh
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 😊January 10, 2021 at 4:41 am #1612925DavidStaffCustomer SupportHi 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 thegrid-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 */ }
January 19, 2021 at 10:09 pm #1625809JoseHello
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
January 19, 2021 at 10:13 pm #1625811ElvinStaffCustomer SupportHi 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.
January 19, 2021 at 10:28 pm #1625823JoseHello
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)
Thank U
January 19, 2021 at 10:49 pm #1625834ElvinStaffCustomer SupportThis 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; }
January 19, 2021 at 11:02 pm #1625844JoseHello
I am very happy with the result
Thanks for your support.
January 19, 2021 at 11:25 pm #1625863JoseMy 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
January 19, 2021 at 11:43 pm #1625873ElvinStaffCustomer SupportGP 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, andhide-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.
-
AuthorPosts
- You must be logged in to reply to this topic.