1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Styling and Customization Questions' started by WearableTechForums.com, Dec 22, 2014.

  1. 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.
     
  2. Russ

    Russ Well-Known Member

    Look at the bottom of sidebar.css:

    Code:
    <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-width:mad:maxResponsiveWideWidth)

    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.
     
  3. Thank you much! (As an aside, I've found that the .node# class works well for isolating styles to certain page nodes.)
     

Share This Page