Site logo

Archived topic

Possible to limit depth of sidebar?

7 replies · Started by Christopher on November 28, 2019

Viewing posts 1–8 of 8

Is it possible to set the sidebar depth so content below it fills the width of the design?

For example:

https://imgur.com/a/AYgn9sc

I'd like the email sign up to cut off at the same point as the featured blog post and have the blog posts below fill the width of the screen.

Hi there,

try this:

@media(min-width: 1024px) {
    .right-sidebar .wp_subscribe {
        padding: 0;
        border-radius: 8px;
        overflow: hidden;
    }

    .right-sidebar .wp_subscribe .wp-subscribe-wrap {
        min-height: 637px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

It also removes the padding around the form widget and adds a border radius to match.

That works very nicely. Thanks! The only thing is the articles below the featured still don't fill the whole width of the design. Here:

https://imgur.com/a/7XoPJxF

I'd like that space on the right to be filled. Is that possible?

This is all terribly hackish but remove the other CSS i provided and add this:

/* Common styles - mobile and desktop */
.right-sidebar .wp_subscribe {
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
}

/* Desktop only layout */
@media(min-width: 769px) {
    .right-sidebar .wp_subscribe .wp-subscribe-wrap {
        min-height: 637px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .site-content {
        position: relative;
    }
    #primary {
        width: 100%;
    }
    #right-sidebar {
        position: absolute;
        top: 0;
        right: 0;
    }
    .separate-containers .site-main {
        margin-right: 0;
    }
    .generate-columns-container .post:first-child {
        width: calc(75% - 20px);
    }
}

Note the first CSS rule is for Mobile and desktop so any background colors etc. should be applied there as the remaining CSS only affects desktop.

Thats because:
1. You have adjusted the width of the content to 65% / sidebar 35%
Which means the width: calc(75% - 20px); needs to be adjusted.

2. Removed the excerpt from the featured post.
So the min-height: 637px; property needs to be adjusted to match the new height.

As i said this is rather hackish and any changes to sizes widths or content length will break it.

Ah! Got it. Thanks a lot.

You're welcome

This archived topic is closed to new replies.