Sidebar and main menu width in %%

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

https://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

THANK YOU x