Customising all Summary Blocks with specific properties

Site URL: https://jaikney.com/blog/the-year-of-magical-thinking

Hi!

I have a sidebar workaround installed with CSS on this page, and I have it set to scroll down the page, code as follows:

#block-yui_3_17_2_1_1613465108991_32703 {
position: -webkit-sticky; //prefix for Safari
position: sticky;
top: 220px;
  z-index: 1;
  margin-right: 20px;
}

Since it's a sidebar on a blog post, I'd like this to be replicated across every blog post. So: is there a way to apply these properties to the relevant summary block on every blog post? I don't want to CSS each individual block on each blog post if I don't have to. Is there a way to target all summary blocks that pull from a specific blog / have a sticky property within CSS?

On a related note, is it possible to alter this sticky property so it scrolls all the way to the bottom of the post whatever the window size and however long the post? Depending on the size of the window, it keeps stopping partway down.

Thanks for all your help!

You can use Sidebar Plugin.

Hi Tuanphan,

I'm not keen on spending additional money if it isn't necessary. I'd be grateful if you could tell me whether or not it's possible to achieve what I've asked about - or if paying for a plugin is the only way.

Thanks!

Replace, make a copy somewhere, your block specific code with the following.

@media screen and ( min-width : 768px ) {

  .blog-item-content .sqs-row:first-child .sqs-col-2:nth-child( 2 ) {
  
    height : 452px;
    position : -webkit-sticky; /* prefix for Safari */
    position : sticky;
    top : 220px;
    width : calc( 16.6667% + 5% );
    
    }
    
  .blog-item-content .sqs-row:first-child .sqs-col-3:nth-child( 4 ) {
  
    width : calc( 25% - 5% );
    
    }
  }

Let us know how it goes.

Hi Thomas,

That's done the trick insofar as applying the sticky property across multiple pages (e.g. here), but now it's leaving a significant gap prior to the summary block at the bottom and then the footer.

So per the other part of my question, is there a way to adapt how far it scrolls to the length of each individual page (so there's no big gap?)

Thanks for all your help!

Hi jumping in to the discussion, how does the sidebar work with mobile? I tried as summary as sidebar, looked fine on desktop, a mess on mobile.

I've updated my code post. Hopefully it takes care of the issues.

I suggest changing the 768 to 767 in the following rule-set.

@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1613465108991_32703 {
        display:none
    }
}

Let us know how it goes.