Blog Post - Content Area Width

[hollanddotts]

Hello,

I’m having trouble figuring out how to adjust the width of the content area of a blog post. Old blog posts that were created before installing the X Pro theme occupy the column the way I would like (ex: http://mountainpoint.com/business-transformation/theres-no-reversing-technological-progress-manufacturers-need-catch/), but when I use Pro to edit the layout, it looks like the following classes are setting the width to 88%:

.post-template-default .x-container.width, .single .x-container.width, .single-post .x-container.width

If I set “margin-left:0;”, then it aligns correctly on the left, but there is still a 12% gap on the right side that I can’t figure out how to get rid of. (Setting the width to 100% pushes the sidebar off the screen on the right.)

I haven’t published any blog posts that have been created with Pro for this reason. Is this a common issue? I’m just looking to make the x-container width 100% without effecting the sidebar.

Thanks in advance for any help!

[mldarshana]

Hi There,

Thanks for writing in! Can you also provide us with links to new example posts that you’re referring to, so that we can assist you accordingly.

Thanks!

[hollanddotts]

Sure, here’s one I’m working on: http://mountainpoint.com/uncategorized/crm-manufacturing-customers-world-manufacturers-just-living/

…And here’s a screen grab showing the area of concern. I don’t see any padding or margin applied, so I’m not sure what the orange area is meant to represent, but i would like to have the content occupy the full width of that column (like the blog posts that aren’t using the Pro builder).

Thank you!

[jade]

Hi there,

Please try this code in the custom CSS:

.single-post .x-container.max.width.offset {
    width: 100%;
    margin: 0;
    padding: 25px 30px;
}

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

[hollanddotts]

Thanks for your reply! I am familiar inspecting elements and updating CSS. The issue is that making the container 100% pushed the sidebar off-screen on the right. I left in the code you supplied here: http://mountainpoint.com/uncategorized/crm-manufacturing-customers-world-manufacturers-just-living/

The CSS you provided did expand the column, but it pushes the sidebar off and I can’t locate what needs to be removed (padding/margin?) to make the sidebar stay put.

[ruenel]

Hello There,

Sorry if it does not work out for you. Please remove the css given by Jade. You may replace it with this code instead:

.post-template-default .cs-content .x-container.max.width,  
.single-post .cs-content .x-container.max.width {
    width: 100%;
}

Please let us know if this works out for you.

[hollanddotts]

Hello @RueNel, thank you, -that did the trick!

Sorry for the delay in response, but yes, this works great.

Thank you!

[friech]

We are happy to assist you with this.

Cheers!