[Resolved] Extend sidebar height when separate containers are used

Home Forums Support Extend sidebar height when separate containers are used

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1142389
    jhmattern

    Hi. I’ve nearly finished moving one of my sites over to GeneratePress, but I’m stuck on one last tweak.

    In order to get the dividing lines I wanted to maintain between the sidebar, header, and content, I ended up having to use separate containers (and hiding the spacers between posts and widgets via CSS).

    The issue is the sidebar stops after the last widget, and the site background / spacer color is displayed there as a big open gray block that cuts into the main area of the page.

    A) Is it possible to force the sidebar to a 100% height somehow so it will maintain the sidebar’s intended white background?

    B) If not, what would be the best way to retain the current spacer lines between the header/content and content/sidebar?

    Thanks!

    #1142496
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media (min-width: 769px) {
        .site-content {
            display: flex;
        }
        #right-sidebar {
            min-height: 100% !important;
            background-color: #fff;
            margin-top:2px;
        }
    }
    #1142501
    jhmattern

    Perfect. Thank you so much! Another site down. Couldn’t be happier getting them moved over to GeneratePress. πŸ™‚

    #1142517
    David
    Staff
    Customer Support

    Awesome – so glad to hear the ‘move’ is going well πŸ™‚

    #1261381
    jhmattern

    This fix appears to have stopped working. You can see an example at https://freelancewritingpros.com/unadvertised-freelance-writing-jobs/ where the divider no longer extends to the bottom of the page. It cuts off after the sidebar content again.

    Any updates that would get this working again? The CSS you shared previously is still in the “additional css” section of the customize area where it was working before.

    Thanks!

    #1261506
    David
    Staff
    Customer Support

    How odd … i made a slight change to the CSS here

    Just the height property became min-height

    #1264491
    jhmattern

    That did it! Thank you!

    #1264673
    David
    Staff
    Customer Support

    Awesome – glad to be of help

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