Secondary Sidebar Width

This topic has 1 reply, 2 voices, and was last updated 9 years, 5 months ago by Sakin.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts

July 18, 2015 at 11:12 pm #61192

Member

Hi, I am trying to increase the width of the secondary sidebar to 300 pixels, the same as the primary sidebar, but I can´t find how to do this anywhere. Is it possible?
I have found a width in the CSS but then the sidebar just falls off to the bottom.
Thank you in advance. I love this theme 🙂

July 22, 2015 at 1:01 pm #61327

Sakin

Keymaster

@m4rkym: Three Columns ( Equal Primary and Secondary Sidebars ) layout option is there only in Catch Base Pro theme. See this demo http://catchthemes.com/demo/catch-base/layout-options/three-columns-equal-primary-secondary-sidebar/

But in Free version, you need to do it manually using custom css. So, try adding following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:

@media screen and (min-width: 991px) {  
   .three-columns #content_sidebar_wrap {
        width: 690px;
    }
    .three-columns #content_sidebar_wrap #main {
        width: 450px;
    }
    .three-columns .sidebar-primary,
    .three-columns .sidebar-secondary {
        width: 240px;
    }
}
@media screen and (min-width: 1101px) {
    .three-columns #content_sidebar_wrap {
        width: 735px;
    }
    .three-columns #content_sidebar_wrap #main {
        width: 460px;
    }
    .three-columns .sidebar-primary,
    .three-columns .sidebar-secondary {
        width: 275px;
    }
}
@media screen and (min-width: 1153px) {
    .three-columns #content_sidebar_wrap {
        width: 760px;
    }
    .three-columns #content_sidebar_wrap #main {
        width: 460px;
    }
    .three-columns .sidebar-primary,
    .three-columns .sidebar-secondary {
        width: 300px;
    }
}
@media screen and (min-width: 1281px) {
    .three-columns #content_sidebar_wrap {
        width: 820px;
    }
    .three-columns #content_sidebar_wrap #main {
        width: 480px;
    }
    .three-columns .sidebar-primary,
    .three-columns .sidebar-secondary {
        width: 340px;
    }
}