[Resolved] Sticky Side Bar doesn’t work (if I use left & right side bar both)

[Jinkwon]

Hi, Generate Press.

I am using CSS as below.
.inside-right-sidebar aside:last-child,
.inside-left-sidebar aside:last-child
{ position: sticky }

It works great if I use the right side bar only
https://www.oppadu.com/%ec%97%91%ec%85%80-%eb%ac%b8%ec%84%9c-%ec%b4%88%ea%b8%b0%ed%99%94-%ea%b8%b0%eb%8a%a5/

However, it does not work if I use the side bar left&right both.
https://www.oppadu.com/question/?uid=9026&mod=document&pageid=1

May I ask how I can solve it?
I want to make the last child of both side bar sticky.

Thank you!
Best regards,

[Elvin]

Hi,

The CSS doesn’t work on the other page because the .inside-right-sidebar and .inside-left-sidebar has a inline style of height: auto !important;.

Take a look at this: https://share.getcloudapp.com/8LunnOgX

This inline height style is preventing the inside sidebar wrappers from stretching its height to the content height meaning the sticky ad doesn’t have vertical space to move around.

A wise man once said:
"Have you cleared your cache?"

[Jinkwon]

Hi, Elvin

Thank you for your kind advise and the video.
I looked at my page to edit the in-line CSS in ‘.inside-right-sidebar and .inside-left-sidebar’, however I couldn’t find the way to edit this.
I tried to add CSS code at CSS style with !important like below,

.inside-right-sidebar, .inside-left-sidebar { height: 100% !important }

However it seems the in-line CSS is prior than CSS file I wrote.

May I ask how I can edit the in-line CSS code at child-theme?

Thank you!
Best regards,

[David]

Hi there,

the inline style of height: auto !important; is not part of the Themes CSS. This is being injected by another plugin. Generally i see this when plugins that add pop-up modals or sticky elements such as Social shares do this.

You would need to eliminate which plugin is causing this by disabling one at a time.

If you can’t do that then you would need to use a plugin like Sticky Anything.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jinkwon]

Hi Generatepress

Thank you for your kind answer.
Problem has been solved.
I found out that Google Ads force to add ‘Height: Auto! Important’ style when the ads size is responsive. (it seems only specific size force to add it)

I fixed this issue as I changed the ad settings to fixed size.

https://support.google.com/adsense/answer/9183363

I hope this might help to others.

Thanks

[David]

Great to hear that – and thank you for sharing the solution!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts