Archived topic
Reducing content area width
9 replies · Started by Ranjeeta on November 9, 2018
I want to reduce the content area width on a single post that has no sidebar. Pages with sidebar are looking fine. I just wanted to reduce and center the content area width for the page without sidebar.
For the particular page, I have shared below contains an infographic. I want it to center and only 750px wide (plus any text)....white space to 1200px and entire desktop to 1366px
Hi there,
try this CSS:
.single-post.no-sidebar .site-main {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}Hi David,
Thanks for your quick reply.
It's working perfectly fine but I want to wrap the content only not background container leaving a white space around. Could you suggest me CSS for that?
I have edited the code above. Let me know.
I was not clear about my asking. Sorry about that. I have attached an image for your reference.
The content width e.g 1200px is set in the Customizer > Layout > Container. The code above then limits the main content area. So should match the image.
Here is an image after making changes.
Can you provide a link to the site? You can edit your original topic and use the Site URL field for privacy.
I found my solution after searching here on the support forum that deals with container padding. I'm sorry that I was not clear enough while asking my question.
Used following code and it's working perfectly fine. Only need CSS to wrap footer area to match above post.
.no-sidebar.single .inside-article > *,
.no-sidebar.page .inside-article > * {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.no-sidebar.separate-containers .comments-area {
padding: 22px 140px 40px 140px;
}
Glad to hear you found the solution. In the footer area are you going to be adding widgets? Can't see the current requirement. Let me know.
