So changing the .span widths isn’t a good idea. Those are bootstrap framework classes and will effect many many other areas of the theme. Also it’s a responsive theme so you don’t want to change the layout for all sizes or you will have a sidebar on mobile and it won’t be large enough.
My first suggestion is to look at the premium theme. It’s just been updated to use a newer framework and the sidebar is smaller. and it works through the theme because it’s framework is different. This is a shameless plug.
Now if you want change this with the free it’s a little complicated and it’s going to make things throughout the theme not work quite right because the theme was built to match the normal size. So it effect this isn’t supported but here we go. Add this to your custom css box in the theme options:
@media (min-width: 1200px){
.main {width:870px;}
aside.span4 {width:270px;}
.kad-header-left {width:270px;}
.kad-header-right {width:870px;}
}
Hope that helps,
Kadence Themes
Hi
I’ve used your CSS above to makes my side bar BIGGER however I would prefer to only change my content width on single pages as I’d rather not have a sidebar on my home page. I used the first half –
@media (min-width: 1200px){
.main {width:870px;}
aside.span4 {width:270px;}
so it changed the width of the content site wide whether I have the side bar or not – is there a work around?
Thanks
Khila
This is older code from 6 months ago, the theme use a little different code now. You can add this to make the sidebar larger only on pages that have a sidebar:
@media (min-width: 1200px) {
.main.col-lg-9 {width: 66.66666666666666%;}
aside.col-lg-3 {width: 33.33333333333333%;}
}
Kadence Themes
Thanks so much for your response, that fixed it!
I have another issue that arose today and I’m wondering if it’s related. A reader complained they can’t read on their mobile because the site isn’t shrinking to their screen size.
Does this custom CSS mess with the theme being dynamic in different screens?
Thanks again
Khila
The css I posted wouldn’t cause issues for mobile. Can you post a link I can tell you if something else is causing it though.
Kadence Themes
http://missbudgetbeauty.co.uk/
I think it looks okay, you need to physically shrink it yourself on the screen and the writings pretty small but it’s causing other people problems
Thanks
Khila
Aah.. just remembered I’d used other code to shrink the whole template.. I took that off and that fixed the mobile issue
Unfortunately I have an ad that runs as a border to my site and it’s overlapping my content
The css I used was
.container {
width: 1100px;
}
Is there an alternative that will allow it to remain dynamic?
Thanks
Khila
You can use css like this:
@media (min-width: 1200px) {
.container {
width: 1100px;
}
}
Kadence Themes
