Hi guys,
I’m hoping to set the height of my sidebar (td-pb-span4 td-main-sidebar) to 100% so that I can make the element sticky on mobile where the smart sidebar does not work.
It appears the sidebar height is automatically made to the height of it’s contents, but setting td-pb-span4 td-main-sidebar to height:100% doesn’t make it any taller.
How can I do this?
Thanks
Hi,
I don’t quite understand what you want to do. Indeed when the mobile theme is active the sidebar is not displayed. If the mobile plugin is inactive, the sidebar appears below the main content in posts for example.
Some examples and more details about this would be very helpful, maybe it is possible.
Thanks
Simion,
Okay, here’s the long explanation.
I am trying to make the last ad in my sidebar sticky on all devices. The current smart sidebar only works on desktop.
I have tried:
1. Using basically all of the sticky plugins
2. A couple js scripts
3. Removing the ios targeting from tagdiv js (https://forum.tagdiv.com/topic/sticky-sidebar-on-ios/)
4. Setting the sidebar to position:sticky;top:0;
I’ve had the most success with number 4 BUT it’s not yet a working solution because you need to set the height of the sidebar to the full height of the document in order for it to work correctly.
So normally, you’d just set the height of that div to 100%… but that doesn’t work with the theme for some reason.
In this example I set the sidebar container height to 100%, but you can see it doesn’t change size: https://imgur.com/a/olkRMbX
So, basically, summed up, in order for position:sticky to work, it needs the sidebar height to be the same height as the document. So I need to figure out how to dynamically have the sidebar equal the document height.
Thanks!
You can make the whole sidebar sticky, as a column, not parts of it. The sidebar should be sticky up to the point where it cannot be displayed next to the main content, on smaller devices like phones. Then it will fall beneath the main content
– https://www.screencast.com/t/KqJmCmuK08F
– https://www.screencast.com/t/aDn41vQG8Ra8
Also as a side note, if you plan to use an Adsense type ad in the sticky sidebar this would be a violation of their terms
– https://www.screencast.com/t/Hm0ZfY1zZ
– https://support.google.com/adsense/answer/1346295?hl=en
Simion,
1. That’s incorrect. The smart sidebar does NOT stay sticky for mobile/tablet user agents.
2. I am not using adsense.
This is the only piece of information I need:
How can I make the sidebar “td-pb-span4 td-main-sidebar” height equal to 100% of the page? Using height:100% in CSS does not work for some reason. Something to do with how the theme is coded.
1. My mistake, indeed the smart sidebar doesn’t work on tablets. You are correct.
2. The page doesn’t have an actual height of it’s own. The elements inside the page rows will be the height. So setting a 100% height to a column will not do anything.
If you place a block for example, that has height values, padding, margins. The column containing it will have the height of what is entered in it.
Forcing a defined value would give the column a bigger height than the elements in it
– https://www.screencast.com/t/AgOsbbdmHWLG
That would be the only way to do this.
