[Resolved] Reducing content area width

Home Forums Support [Resolved] Reducing content area width

Home Forums Support Reducing content area width

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #723101
    Ranjeeta

    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

    #723115
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .single-post.no-sidebar .site-main {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
    #723654
    Ranjeeta

    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?

    #723665
    David
    Staff
    Customer Support

    I have edited the code above. Let me know.

    #723877
    Ranjeeta

    I was not clear about my asking. Sorry about that. I have attached an image for your reference.

    #723952
    David
    Staff
    Customer Support

    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.

    #724207
    Ranjeeta

    Here is an image after making changes.

    #724340
    David
    Staff
    Customer Support

    Can you provide a link to the site? You can edit your original topic and use the Site URL field for privacy.

    #724986
    Ranjeeta

    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;
    }

    #725107
    David
    Staff
    Customer Support

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.