[Resolved] Content Container Not Centred?

Home Forums Support [Resolved] Content Container Not Centred?

Home Forums Support Content Container Not Centred?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1674266
    Simon

    I know the title is wider width but still, the content column isn’t centred across the site and I can’t find out for the life of me why.

    See the image below, title is centred but content column on posts isn’t:

    centre

    #1674301
    Ying
    Staff
    Customer Support

    Hi Simon,

    The Page hero is indeed centered, the issue is that your content is not centered.
    https://www.screencast.com/t/tiWl7Lsrq

    #1674312
    Simon

    That’s right, so how do I fix it? πŸ™‚

    #1674328
    Ying
    Staff
    Customer Support

    So would you like the content to be centered? Or would you like to move the header align with the not centered content?

    May I ask is there a special reason that an empty right sidebar is placed in the post? It creates problems for the overall layout.

    #1674339
    Simon

    Oh I see, so it’s this that’s causing the issue?

    @media(min-width: 1180px) {
      .right-sidebar .site-content .content-area {
        width: 75%; /* Width of content minus width of sidebar */
        margin-left: 25%; /* width of sidebar */
      }
    }

    I would definitely like the content column to be centred and then a small sidebar to the right of it.

    layout

    But if this really isn’t possible then I’ll choose to give up the sidebar.

    #1674367
    Ying
    Staff
    Customer Support

    I did a little math for you πŸ™‚

    The content is set to 75% width, right sidebar is 25%, these 2 number is based on the container width, but the margin you set in your CSS is based on the screen width. That’s why the spaces are not even.

    If you want the same spacing on the left side of the content, then the number should be 25%Γ·75%=33.33%. If you change the sidebar width, you’ll need to calculate the number again.

    So scrap the margin-left: 25%;, use the below CSS instead:

    @media(min-width: 1180px) {
        .post .inside-article {
            margin-left: 33.33%;
        }
    }

    Let me know πŸ™‚

    #1674378
    Simon

    You are amazing, thank you so much honestly!

    A lot of work (and a lot of help from support) these last couple fo days but so happy with it now.

    amazing

    Thank you again and have a wonderful weekend! πŸ™‚

    #1674379
    Ying
    Staff
    Customer Support

    You are welcome, good luck to your new site πŸ™‚

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