[Support request] Possible to limit depth of sidebar?

Home Forums Support Possible to limit depth of sidebar?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1080966
    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.

    #1081159
    David
    Staff
    Customer Support

    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.

    #1081165
    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?

    #1081198
    David
    Staff
    Customer Support

    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.

    #1081226
    Christopher

    Things seem to have gone a bit haywire here:

    View post on imgur.com

    #1081240
    David
    Staff
    Customer Support

    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.

    #1081531
    Christopher

    Ah! Got it. Thanks a lot.

    #1081603
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.