Widen Post/Page body

can you give website link?

The website isn’t live yet. Does the image I linked work at all? ?? Thank you!

It’s definitely best that we see the actual site since you’ve made some style changes to it already.

But that space, at least in default Twenty Fourteen, is controlled by a combination of the following CSS:

• The .site-content column has a heavy right margin. You can reduce it.
• The .content-sidebar column is padding on all four sides. Maybe you can reduce the padding-left property.

Please remember that these values change based on screen size. So when you start adjusting the dimensions of the layout, you may have to play accordion with your screen and make adjustments in multiple media queries.

I am having the same problem with my site. Is it possible to widen the post width.

This is the post I want to widen;
https://snapshottravel.co.uk/newyorkin48hours/

Thanks

harrietbone

In your particular site, you can use the following in a custom CSS setting or a child theme:

.site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
max-width: 800px;
}

Thank you

Pete

Hi Pete,

Thanks for the help but unfortunately it didnt work ??

I just copied it in to the ‘Simple Custom CSS’ plugin I have. Is that right? Sorry I am very very new to website building.

@sdavis2702
Ok thank you, I see! Here’s the website then.

I tried using @pete’s code but it didn’t work for me.

Thank you!

Okay the link helps. Again, this is a little more complicated than just a snippet of CSS because your responsive styles will be affected by the changes you make for the desktop styles.

That said, you’ll want to start with the CSS selector I mentioned before. It should be wrapped in the 1008px min-width media query. Making the right margin of the content column only 300px (down from 29.04761904% of 1260px) will bring the right edge of the content to the left edge of the sidebar column (which has an inside padding itself, so it won’t look like they’re flush… but they are.

@media screen and (min-width: 1008px) {
    .site-content {
        margin-right: 300px;
    }
}

And I think some adjustments may have been made to the sidebar width already… there’s a lot of CSS going on so it’s hard to tell what’s custom and what’s part of the theme. But as the screen width is reduced, they layout starts to break… not because of the CSS I’m giving you but because of other changes that have been made already. So I just wanted to point that out ahead of time.

Now it’s important to note that the adjustment I’m giving you for your content column is based on a featured image being there. So on the About page, you’ll see the space reduce as it should. On something like the home page, the space reduces but it’ll still be a huge gape because the 2014 theme design expects a featured image to be wide and the content beneath it to be a little more slim. All you have on the home page, in this case, is the content beneath the non-existent featured image. So… yea…

Anyway, for just what you asked for, the CSS I gave will do the trick. But again, this isa pretty complex layout so there are a lot of things to consider. Let me know if this helps!

Thank you so much for all the informations!
I’ve added the code you gave me and it works for me! Do you have any visualization problems?

As for the CSS I tweaked, it’s not even that much really. I use a plugin called ‘my custom css’ to make my changes, so I don’t have a child theme.

This is what’s inside:

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta, .page-content {
 /* Original max-width: 474px */
 padding-top: 5px;
 max-width: 80%;
}

table,
th,
td {
	border: none;
}

.content-sidebar {
  width: 300px;
}

.content-sidebar .widget .widget-title {
 			border-top: 5px solid #69babe;
 				color: #2b2b2b;
 				font-size: 11px;
 				font-weight: 900;
 			margin: 0 0 18px;
 			 padding-top: 7px;
  line-height:18px;
 				text-transform: uppercase;
 		} 

 			#secondary .widget .widget-title {
 			border-top: 5px solid #69babe;
#secondary {
			width: 162px;
		}

I know it is probably a lot to ask, but what line do you think it’s causing the problem when the screen width is reduced?

Thanks so much again!

It’s really hard to say because there are so many moving pieces that it’s hard for me to test in my browser inspector. But, what I feel like needs to happen is…

Take the CSS I gave you before and put it at the end of the my_style.css file. Assuming that’s the file you put in your last comment, put it at the bottom of all that.

Then from the same file, remove this CSS rule from where it currently sits:

.content-sidebar {
    width: 300px;
}

And put it inside of the media query from the first chunk of CSS I gave you which should now be at the bottom of your file. The end result would be the CSS you have above, minus the .content-sidebar rule, and the following CSS at the very bottom:

@media screen and (min-width: 1008px) {
    .site-content {
        margin-right: 300px;
    }
    .content-sidebar {
        width: 300px;
    }
}

Again, this is something that could take several tweaks so what I’m giving you now could hit the nail on the head or more tweaks could be required. But let’s get that in there and go from there.

Thank you! I’ve done as you said, and now the mobile version doesn’t break anymore.

However I can’t see any change in the width of the post body. I tried changing the px value but nothing seem to happen.

Find this line in your my_style.css file:

border-top: 5px solid #69babe;

Add a closing curly bracket after it }… it’s missing. All CSS below that missing bracket is useless at this point.

Ohh, what a stupid mistake! How could I miss it!
Also the code you gave me works now and it’s perfect ??

Thank you so much!!

No problem at all. I’m glad I could help. ??