[Support request] Possible to limit depth of sidebar?

[Christopher]

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

For example:

View post on imgur.com

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.

[David]

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.

[Christopher]

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:

View post on imgur.com

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

[David]

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.

[Christopher]

Things seem to have gone a bit haywire here:

View post on imgur.com

[David]

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.

[Christopher]

Ah! Got it. Thanks a lot.

[David]

You’re welcome

[Author]

Posts