Archived topic
Sticky widget - Right Sidebar
3 replies · Started by HT on September 21, 2021
I have seen this CSS code in the thread https://generatepress.com/forums/topic/sticky-right-sidebar-widgets/
My question is where should I have this CSS code? Customizing -> Simple CSS ? I tried this but it seems not working.. Code I used it the following
@media (min-width: 769px) {
.inside-right-sidebar >*:nth-child(11) {
position: sticky;
z-index: 200;
top: 60px;
}
.inside-right-sidebar {
height: 100%;
}
}Hi there,
That won't work on your site as it is on your site as something seems to be adding attribute style="height: auto !important;" to ALL of the elements on your site. This isn't a default behavior of the theme so a script or a plugin is likely adding it.
But if you don't want to deal with that, you can try this workaround:
@media (min-width: 769px) {
.inside-right-sidebar >*:nth-child(11) {
position: sticky;
z-index: 200;
top: 60px;
}
.inside-right-sidebar {
height: 100%;
min-height: 100%;
}
}Adding it on Simple CSS should be fine. :)
Thank you the updated CSS worked ok.
I'm interested to know more about style="height: auto !important;" I want to avoid any performance issue because of code. Would there be any performance impact with this difference in the default code?
Hi there,
i know that Google Adsense injectss the style="height: auto !important;" when adverts are placed inside a scrolling container. I am not sure why, it maybe to stop developers adding hidden content elements on the page or it maybe required to ensure auto sized ads have the freedom to resize.
Does it make a difference to performance ? Its just some Javascript so onload it would make very little difference, on low end mobile devices it may have an impact on user experience ( increased CPU overhead ). But if you require a page filled with adverts and google forces that change then there is little you can do about that.
