[Resolved] Centered Content while using sidebar

Home Forums Support [Resolved] Centered Content while using sidebar

Home Forums Support Centered Content while using sidebar

  • This topic has 5 replies, 2 voices, and was last updated 5 years ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #853361
    Maarten

    I’m trying to have a centered primary content area all over my website, but add a right sidebar on certain pages while keeping the central content area the same (same width and centered).

    I’ve tried almost everything (also in the beta 1.8), but can’t figure out how.

    Closest I got is specifying a global width in the customizer that uses a width that’s suitable for sidebar/content/sidebar and then removing the sidebars and changing the width in a layout element where they aren’t needed (beta 1.8 function). However, this means I can’t use the sections function anymore to have a section background stretch the full screen.

    Any suggestions?

    #853381
    David
    Staff
    Customer Support

    Hi there,

    can you link me to a page where the sidebar is active?

    #853398
    Maarten

    Hi David,

    It isn’t, as I can’t get it to work. Not that I can’t activate the sidebars (see the test page below), I just can’t get the primary content to stay centered.

    My container width now is 700px. If I activate a sidebar, this stays 700 of course (making the primary area smaller to add the sidebar, see test page). In the beta 1.8 I can specify a container width per layout element, but as this is a max-width it doesn’t widen it, but can only make the container smaller.

    Test page: https://photographydomination.com/sidebar-test/

    #853564
    David
    Staff
    Customer Support

    Hmmm… try this:

    @media (min-width: 1024px) {
        .right-sidebar .site-content {
            display: flex;
        }
        .right-sidebar .content-area {
            flex: 1 0 700px;
        }
        .right-sidebar .site.grid-container {
            max-width: 1300px;
        
        }
        .right-sidebar .site-content:before {
            content:'' !important;
            display: block;
            flex: 0 0 300px;
        }
        .right-sidebar #right-sidebar {
            flex: 0 0 300px;
        }
    }
    #853584
    Maarten

    My hero! ๐Ÿ™‚

    Didn’t think of using the .right-sidebar class and flex myself, so thanks! I’ll probably add some for the tablet media query as well, but should be able to figure that out myself.

    Thanks for the fast responses!

    #853587
    David
    Staff
    Customer Support

    Its a bit overkill and i am sure it could be done with some left margin on the content area, but i think this is a little more flexible ๐Ÿ™‚

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