[Resolved] Keep the primary content-area centred, and at 60%

Home Forums Support [Resolved] Keep the primary content-area centred, and at 60%

Home Forums Support Keep the primary content-area centred, and at 60%

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1553573
    vikingruler

    Hello there

    I would like to make use of the following sidebar positions on different pages / posts, etc. on my site:

    – Right Sidebar
    – Left Sidebar
    – No Sidebars
    – Both Sidebars

    If I set the container width to 1440px and both the left sidebar width and right sidebar width to 20% each, how do I keep the primary content-area centred, and at 60%, as it is when I use both sidebars.

    My objective is to have the primary content-area remain the same width, and in the same position, whether there are both sidebars, no sidebars, etc., as this makes for a more pleasant user experience.

    I am using a child theme, and would prefer to work on a solution outside of ‘Elements’, if at all possible.

    Thank you.

    Kallad

    #1553818
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know 🙂

    #1554628
    vikingruler

    Thank you Leo,

    I have given the link below.

    To explain further:

    – Container width to be 1440px

    – Primary content-area to be 60%, with left sidebar, or, with right sidebar, or with no sidebars. Currently it only remains at 60% when I use both sidebars.

    – Primary content-area to be centered, with left sidebar, or, right sidebar, or no sidebars. Currently it only remains centered when I use both sidebars.

    – Full page layout width of website, would then be the same width as when I use both sidebars – centred, and at 60% – and not the full container width of 1440px.

    Thank you.

    Kallad

    #1555143
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    @media(min-width: 769px) {
        body:not(.both-sidebars) #page .site-content .content-area {
            max-width: calc(60% - 20px);
            margin-left: auto;
            margin-right: auto;
        }
    
        body.right-sidebar #page .site-content .content-area {
            margin-right: unset;
        }
    
        body.left-sidebar #page .site-content .content-area {
            margin-left: unset;
        }
    }
    #1555538
    vikingruler

    Thank you David,

    This worked 100%.

    Kallad

    #1556121
    David
    Staff
    Customer Support

    Awesome – glad to be of help

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