[Resolved] How to create sticky footer using hook element to show google adsense ads

[surendra1506]

Hi team,

I am using

class to show ads on mobile view of my site classmate4u.com.

Along with the CSS:-

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

I had achieved the desired outcome on mobile view.

But for Desktop view, I am using 728 * 90 ad unit of google Adsense. It is showing at the bottom but the ad is appearing on the left side and

Also, it is not sticky to the bottom.

My only requirement is to make an ad of 728*90 size to the center and sticky for desktop view.
Thanks in Advance

Surendra Jadli

[surendra1506]

Hi team,

I am using

class to show ads on mobile view of my site classmate4u.com.

Along with the CSS:-

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

I had achieved the desired outcome on mobile view.

But for Desktop view, I am using 728 * 90 ad unit of google Adsense. It is showing at the bottom but the ad is appearing on the left side and

Also, it is not sticky to the bottom.

My only requirement is to make an ad of 728*90 size to the center and sticky for desktop view.
Thanks in Advance

Surendra Jadli

[Fernando]

Hi Surendra,

For reference, can you provide the link to the site in question?

Can you also try hooking the ad to after_footer if you’re using a Block or Hook Element?

[surendra1506]

Hi Fernando,

Thanks for your reply.

The site I am talking about is https://www.classmate4u.com/

Also, I am using the after_footer hook element.

The only requirement I want is to make it center and sticky.

Surendra Jadli

[Fernando]

Try adding ad-footer to the class list of the div holding the ad. It currently has custom-ad-container class, just add it after that.

Then, add this in Additional CSS:

.grid-container.custom-ad-container.ad-footer {
    position: fixed;
    bottom:0;
    left: 50%;
    transform:translateX(-50%);
}

[surendra1506]

Hi, Fernando,

I implemented the Div Class ad-footer on both the mobile div class and desktop div class along with the CSS you had given.

But it’s not working on the Desktop view. The mobile view is fine.

Surendra Jadli

[Fernando]

The class ad-footer hasn’t been added yet. See: https://share.getcloudapp.com/5zuPnEmo

Can you try clearing cache?

[surendra1506]

Hi Fernando,

I implemented the ad-footer div class and its showing on my end in inspect element also.

Request confirm the same.

Surendra Jadli

[Fernando]

It’s now there.

However, you added the CSS code I provided inside a media query for mobile.

You’ll need to put it out of the media query for it to work on Desktop as well.

[surendra1506]

I don’t understand what you said sorry for that.

Can you simplify it for me?

I am not a technical person.

What exactly do I need to implement?

Surendra Jadli

[surendra1506]

Thank you Fernando

I figured out what you said and implemented the same.

I had god my desired output.

Thanks a lot

Surendra Jadli

[Fernando]

I see. You’re welcome Surendra!

[Author]

Posts