Increase Main Content Width

Activello
1

Hi!

I’d like to increase the main content width of my page. Not to full-width, but just a little bit so the posts are a little wider. Hope you can help!

website: http://www.forsethgard.no

Thank you so much!
All the best
Trine Marie

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the width by going to Appearance > Customize > Additional CSS and pasting it there.


/*Main content size*/
@media (min-width: 996px)
.main-content-inner.col-sm-12.col-md-8 {
    width: 75%;
}

/*Sidebar size*/
@media (min-width: 996px)
div#secondary {
    width: 25%;
    margin-left: 0%;
}

Best Regards,
Support

3

Hi again and thank you for getting back to me so soon. The code you gave doesn’t help me as it only seems to shift how much of the space is used for the main content and how much is used for the sidebar. The total width of the content remains the same. I think, though, that it could have something to do with some previous css I’ve added earlier. I’ve pasted all the css here so you can see if I’ve duplicated something or done something else foolish that messes with new code. I’m an absolute newbie with this sort of editing so all help is so, so greatly appreciated!

body {
color: #3D3D3D;
font-family: Helvetica-Light;
font-size: 12px;
text-align: left;
font-weight: 400;
}
/Line space/
body, p {
line-height: 1.5;
}
@media (min-width: 996px) {
.main-content-inner.col-sm-12.col-md-8 {
width: 70%;
}
div#secondary{
width: 30%;
}
/increase space between sidebar and blog/
div#secondary {
width:25%;
margin-left:0%;
}
.widget a,
.widget {
font-family: Helvetica-Light;
font-size: 12px;
text-align: center;
font-weight: 400;
text-align: justify;
text-justify: inter-word;
}
.widget-title {
font-family: Helvetica;
letter-spacing: 1px;
}
}
#primary {
border-right: 1px solid #cccccc;
padding-right: 5%;
padding-left: 5%;
}
.entry-title, .entry-title a {
color: #3D3D3D;
font-family: Lato;
font-weight: 400;
font-size: 18px;
font-style: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
.navbar-default .navbar-nav li a {
font-family: Lato;
font-weight: 400;
font-size: 11px;
color: #DDDDDD;
}
div#logo {
padding-top: 0px;
padding-bottom: 0px;
}
/Main content size/
@media (min-width: 996px)
{.main-content-inner.col-sm-12.col-md-8 {
width: 75%;
}
/Sidebar size/
@media (min-width: 996px)
{#secondary {
width: 25%;
margin-left: 0%;
}
#page #secondary .widget {
margin-bottom: 20px;
} } }

4

Going back and forth with and without the code you provided I see that the width of the blog shifts a little bit. I do wish it would get a little wider though. If it’s possible? I love the width of this blog: http://bleubirdblog.com which is what I’m aiming for.

5

Hey there

What about to increase main container width? please try this css and let me know if it worked

.container {
max-width: 1170px;
}