How to cut off sidebar at the bottom of the content

Hi Joe-

Thanks for reaching out, and for choosing the Grid One WordPress Theme from BoldGrid.

This is possible, but it will take a little extra trickery with JavaScript in addition to CSS, because CSS doesn’t have a method to measure another element’s height.

First, enter this Custom CSS in your Customize > Advanced > Custom JS & CSS:

aside.sidebar { overflow-y: hidden; }

That will do the job of hiding any content beyond the sidebar’s max-height. Now we need to use JavaScript to set that max-height value according to the length of your page’s or post’s content. Enter this into the Custom Theme JS

jQuery(document).ready(function($) {
    $('aside.sidebar').css({ 'max-height' : $('div.entry-content').outerHeight() + 'px' });
});

This code does a couple of things. It waits for your whole page to load using the (document).ready trigger. Then, it sets the max-height of your sidebar to the same height as your entry-content.

Coupled together, this code should accomplish what you’re after.

Another possibility you can consider is to use the Widget Logic plugin to only show certain sidebar widgets on certain pages, or simply reduce the number of recent posts and recent tweets you’re showing now.

Hi Joe-

It looks like there may be a small typo in the code you pasted into your Custom JS. Double-check your first line, and make sure that it’s not “commented out” with a double-slash. Right now, it looks like this when I take a look:

// jQuery(document).ready(function($) {
    $('aside.sidebar').css({ 'max-height' : $('div.entry-content').outerHeight() + 'px' });
});

Remove that double-slash at the beginning of the first line, and it should work.

Hi Joe-

Thanks for the screenshot, that’s very helpful. I’ll see if I can tweak our security system so that issue creating a new topic doesn’t occur again.

I was able to replicate that issue with the video using Safari 13.1 on MacOS Catalina, but it looked fine on Safari 14 for MacOS Big Sur, so it’s definitely a weird issue with Safari specifically.

I wasn’t able to figure out exactly how you have that video embedded, are you using a special plugin to embed that? The issue seems to be related to the way Safari is interpreting the height of the video iframe. I had some luck with this CSS:

.video-responsive iframe { min-height: 480px; }

However, I’m not sure how that will play out across other devices. If you’re using a special plugin for that video, we might want to check with their authors to see if it’s a known issue.

Hi Joe-

Good catch! I should have tested on the blogroll, where it was cutting off after your first post. Update that code to this:

jQuery(document).ready(function($) {
if ( ! $('body').hasClass('home')) {   
$('aside.sidebar').css({ 'max-height' : $('div.entry-content').outerHeight() + 'px' });
}
});

This basically says, “If we’re on the homepage, keep it at 100% height, otherwise cut it off at the content.”

Hi Joe-

First off, congrats on all the work you’ve done so far, designing a sidebar and sticky header from scratch isn’t a small feat!

With the breakpoints you have set up at >= 1130 and <1129, it looks like your header plus stock ticker widget is about 140 pixels and 200 pixels, respectively. So, you can add a line to each of your media queries to compensate for it, like so:

@media (min-width:1130px){
.site-header {
position: fixed;
top: 0;
width: 100%;
height: 15%;
z-index: 200;
background: #2d2d2d;
	}
main > row { margin-top: 140px; }
}

@media (max-width:1129px){
.site-header {
position: absolute;
top: 0;
width: 100%;
height: 40%;
z-index: 200;
background: #2d2d2d;
  }
main > row { margin-top: 200px; }
}

I wasn’t able to replicate the issues you described with the background of the stock ticker, but as near as I can tell its background is transparent, which causes some issues with the CSS I listed above. Try adding this outside of your media queries:

#custom_html_5 {
background: #2d2d2d;
}

Hi Joe!

I took a look at the mobile display for your website and it looks like the reason the blog post titles are sliding under the header area is caused by the absolute positioning assignment on that area created by the following CSS rule:

@media (max-width: 1129px)
.site-header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 35%;
    z-index: 200;
    background: #2d2d2d;
}

You could try using position: relative; instead of position: absolute; in that rule. Changing to a relative position should cause the blog post titles to display below the ticker widget in your header instead of causing them to slide under the entire header area.

Please let us know if you have any other questions for us!