Newspaper Sidebar Width to be exactly 300px wide

Hi, I want a sidebar width to be exactly 300px. On browser resizing, if 300px sidebar width content can’t be fit it in, I don’t want to see a responsive sidebar by becoming slimmer & slimmer but rather I want the sidebar to be dropped to the bottom of the page. I have tried many CSS tweaks but could not make it work. BTW I have smart sidebar option turned on from theme panel as well.

Could you please suggest exactly what do I have to do to achieve this?

Thanks, JK

Hi Simion,

One of the ad networks that I plan to partner with has this requirement. As the browser resizing action happens, the sidebar width shrinks and that will show cut-up ad which violates their ad-policy rules. The ad network wants to be loyal for their advertisers to show their ads in full size. If 300px can’t be displayed, then it should fall to the bottom of the page.

It is a real disappointment that NP doesn’t support this. Now I have to research another theme in the market which does this for me.

Thanks.

Hi Simion,

After a lot of trial and error, I achieved what I wanted with NP theme itself but just 1 caveat (I had to lose the sticky smart sidebar feature).

This custom CSS does the magic.

@media (max-width: 1018px) and (min-width: 768px)
{
    .td-pb-row [class*="td-pb-span8"] {
        padding-right: 14px;
        padding-left: 14px;
        width: 100%;
    }
    .td-pb-span4 {
        width: 324px;
    }
}

I think I need some customizations to js/tagdiv_theme.js file to handle the stickiness around this section of the code:

if (tdUtil.getBackendVar('tds_smart_sidebar') == 'enabled' && tdDetect.isIos === false) {

Basically if we can avoid sticky sidebar if the width is between 768 & 1018 in this code section, I think I’ll be all set.

Could you show me a piece of code that does the check for the screen size in jquery and not trigger the event for scroll-up.

Let me know if this makes any sense.

Thanks, JK

• This reply was modified 8 years by jkfriends.