Wanting to increase Secondary Sidebar width

wanderingmason · Member · Jul 10, 2014 at 2:45 am
Copy link

Add topic to favorites
Hi,

I would very much like to increase the width of my secondary sidebar (right side). Is this possible? Using CSS? I am using a customized Ari Theme.

Thank you!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 10, 2014 at 6:25 pm
Copy link
Hi there, in order to maintain the spacing and such, there are two ways to do this. One would be to keep the overall width of the site the same and rob some width from the content area, which you probably do not want to do. The other is to widen the overall width of the theme and use that additional space to widen the content/right sidebar area and the right sidebar in particular. Since you did not mention how much wider you wish the sidebar to be, I’ve assumed you want it about the same width as the left sidebar area (about a 90px increase in width). I’ve use a media query to limit this change to device/browser window widths of 926px and wider since that is the point where the right sidebar moves down below the content. Give the following a try and see what you think.
```
@media screen and (min-width: 926px) {
    #page {
       max-width: 1050px;
    }
    #tertiary {
       width: 30%;
    }
    #main {
       width: 69%;
    }
    #primary {
       width: 60%;
    }
}
```
With responsive width themes such as Ari, it is important to follow the width conventions used in the original theme, which in this case are percentage values and then a maximum width for the overall theme width.
thesacredpath · Member · Jul 10, 2014 at 6:30 pm
Copy link
In case you are interested, see here for a little more on Media Queries with Custom CSS
wanderingmason · Member · Jul 11, 2014 at 3:53 am
Copy link
Great, this worked! Thank you

No items found.