Jump to content

Customising all Summary Blocks with specific properties

Recommended Posts

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!

Screenshot 2021-02-17 at 09.48.51.png

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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!

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.