Content width in boxed layout

Try this css in your custom css box in the theme options > advanced settings:

@media (min-width: 768px) {
.boxed .contentclass, .boxed .headerclass, .boxed .footerclass, .boxed .navcontainer, .boxed .featclass {
margin-left: -40px;
margin-right: -40px;
}
}
@media (min-width: 768px) {
.boxed #wrapper.container {
width: 750px;
padding: 0 40px;
}
.container {
width: 670px;
}
}
@media (min-width: 992px) {
.boxed #wrapper.container {
width: 970px;
padding: 0 40px;
}
.container {
width: 890px;
}
}
@media (min-width: 1200px) {
.boxed #wrapper.container {
width: 1170px;
padding: 0 40px;
}
.container {
width: 1090px;
}
}

Kadence Themes

Hi,
thank you, it worked, but how can I make the spacing even bigger(maybe around 1.5-2 times the amount it is with the code above?
Also, how can I increase the space on top of the content?

Hey danina84, try using this css instead:

@media (min-width: 768px) {
.boxed .contentclass, .boxed .headerclass, .boxed .footerclass, .boxed .navcontainer, .boxed .featclass {
margin-left: -40px;
margin-right: -40px;
}
}
@media (min-width: 768px) {
.boxed #wrapper.container {
width: 750px;
padding: 0 80px;
}
.container {
width: 670px;
}
}
@media (min-width: 992px) {
.boxed #wrapper.container {
width: 970px;
padding: 0 80px;
}
.container {
width: 890px;
}
}
@media (min-width: 1200px) {
.boxed #wrapper.container {
width: 1170px;
padding: 0 80px;
}
.container {
width: 1090px;
}
}

Hannah

Hi Hannah,
unfortunately this code didn’t work at all…the box container is even smaller and there are “second” borders on the left and right from the box…

danina84,
can you post a link to your site.

Kadence Themes

Hi there,
I have a similar concern. The code posted above works sort of one way. This is my page: https://klsmn.bplaced.net/wp1/

I am running my site in boxed mode and I already have this code in place, to limit the maximum page width.

@media (min-width: 1000px) {
.container {
width: 900px;
}
}

Now, I’d like to have bit more padding between the borders and the start of the content/text. Ideally, I’d like to adjust the padding all around the site, so the header/slider/top menu etc. on the front page should all be affected, too.

The solution above (in my case, I just added “padding: 0 80px;” to the code above) just offsets the content to the right, see this example: https://i.imgur.com/faGXkpT.png

How do I do it correctly?

Thanks!

You can add css like this.

@media (max-width: 800px){
    .boxed #wrapper.container {
     width: 100%;
    }
}
@media (min-width: 800px){
    .boxed #wrapper.container {
     width: 800px;
    }
}
@media (min-width: 992px){
    .boxed #wrapper.container {
     width: 1000px;
    }
}

Kadence Themes

Resolved, thank you very much!