[Resolved] Stick last widgets in right sidebar not working

[Pintu]

Hi, I’ve added the following CSS to make the last widget sticky (AdSense Ad Code) in my sidebar

@media(min-width: 769px) {
    .inside-right-sidebar {
        height: 100%;
    }
    .inside-right-sidebar .widget:last-child {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }
}

But it’s not working. Please help

[Fernando]

Hi Pintu,

Can you try #1 here?: https://docs.generatepress.com/article/debugging-tips/

Something is adding an inline style height to your inside-right-sidebar which is not default and causing the code not to work.

[Pintu]

Found out the cause. I was using another Responsive ad unit above the sticky ad, just removed it, and it is now fine.

[Fernando]

I see. Glad you found the issue.

[Pintu]

Hi, though the Ad is now sticky it is not center aligned.

I’ve added the <div align="center"> and </div> but still it is not in center.

[Fernando]

Try to add this CSS:

.inside-right-sidebar .widget > div {
    display: flex;
    justify-content: center;
}

[Pintu]

Yes, it worked!

So, can I now remove <div> and </div> from the HTML?

Thanks.

[Fernando]

You can remove that, and change this:

.inside-right-sidebar .widget:last-child {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }

to this:

.inside-right-sidebar .widget:last-child {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
display: flex;
    justify-content: center;
    }

and see if it works.

[Author]

Posts