XF 1.4 Set Custom Width at Which Sidebar Collapses (Responsive)

[WearableTechForums.com]

Is it possible to set a custom width at which the sidebar collapses—preferably for a particular page node? My page here needs the sidebar to collapse earlier than usual.

Thanks.

 

[Russ]

Look at the bottom of sidebar.css:

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
   .Responsive .mainContainer
   {
      float: none;
      margin-right: 0;
      width: auto;
   }

     .Responsive .mainContent
     {
       margin-right: 0;
     }
   
   .Responsive .sidebar
   {
     float: none;
     margin: 0 auto;
   }

     .Responsive .sidebar .visitorPanel
     {
       display: none;
     }
}

@media (max-width:340px)
{
   .Responsive .sidebar
   {
     width: 100%;
   }
}
</xen:if>

Easiest method would be to just edit the : @media (max-widthmaxResponsiveWideWidth)

to, @media (max-width:1000px) or whichever you want.

For it to be specific to certain pages, you could paste that css inside the node html area inside a <style> </style> at the top of the html.

 

[WearableTechForums.com]

Thank you much! (As an aside, I've found that the .node# class works well for isolating styles to certain page nodes.)

 

[WearableTechForums.com]

Works great!
http://wearabletechforums.com/compare/specs/?vs=surge&vs=charge&vs=chargeHR&vs=flex&vs=one&vs=zip