Blog Posts won't go full width

[mike4]

I’ve adjusted all the settings in Theme options relating to the blog and blog posts, but I can’t get the actual posts to go full width. I’ve also tried a number of CSS mods on my own as well as using some of the code from other posts. It did not work.

Ideas? I’d like to be able to stretch all items separately, like you can with any regular page.

https://syfc.somersetinteractive.com/2018/05/21/our-financials

[Prasant]

Hello @mike4,

Thanks for asking.

To have full width blog posts, please select fullwidth from X > Theme Options > Layout and design > Content layout.

Thanks.

[mike4]

I’ve already done that. Even resetting those options does fix the issue.

Thanks

[friech]

Hi Michael,

Please add this to Theme Options > CSS

.single-post .x-container.offset {
	margin-top: 0;
	margin-bottom: 0;
	width: 100%;
	max-width: none;
}

You can inspect your site using Chrome’s developer tools https://developer.chrome.com/devtools1 to see the styling that is applied to an element and then using custom CSS to override it. You can find more info on how to check for CSS selectors here. Then information about writing your custom CSS here.

Hope it helps,
Cheers!

[mike4]

I have two issues with this. 1. Why do I need to override anything when supposedly this is built into the Theme as stated in the first response? 2. This still does not answer my initial question completely of stretching the element containers as well. You can still see that the container in grey will not stretch full width.

https://syfc.somersetinteractive.com/2018/05/21/our-financials/

[nico]

Hi @mike4,

1. X theme default Blog Posts does have container for contents even though you have set it full width. So you will need to override the content width to make it full width. You could check it by changing from full width to boxed in your theme options > Layout and Design.

2. Add this in your CSS to remove the padding for your entry wrap:

.has-post-thumbnail .entry-wrap{
     padding:none;
}

Let us know how it goes.

Thanks.

[mike4]

This didn’t fix the full width issue. What I want to change is to have the full page full width as with the homepage of the site. This second css doesn’t effect the rows/columns sections that have some sort of border around them.

[friech]

Hi Michael,

Sorry about that, please update the last provided code to this:

/*remove the padding around the posts content container */
.single-post .entry-wrap {
	padding: 0 !important;
}

You needed a custom CSS for this, because the default template of posts page has a box container.

Thanks,

[mike4]

Looks good. Thank you.

[friech]

You’re welcome, glad we could help.

Cheers!