fixed sticky Text

19 hours ago, Phil84vaive said:

I'mm trying to do the same on https://www.paulinaramis.com/press - I would just like the left column to be sticky (the one that includes the article titled "CAPSULE WARDROBES MAKE STYLE EASY". I've tried everything I can think of

I've changed my layout a bit so now I would just like the column on the left (PRESS) to be sitcky. I know what code to write, I just don't know what to write in front of the 

{ 
     position: sticky !important;
    position: -webkit-sticky;
    top: 0;
  }

Is there a code that doesn't change, which I can put into my blog posts to have text fixed on left and images scrolling down on right? I have very little knowledge of Squarespace, so step-by-step instructions help! And if the code slightly changes for individual posts, what part of it would I need to change?

Here is an example of a blog post: 

https://www.providenceacademie.com/report/2023/2/20/pinch-pots

but I would also also like to do this with other future blog posts!

Thanks so much!

www.providenceacademie.com

3 hours ago, providenceacademie said:

have text fixed on left and images scrolling down on right?

For the post you show I don't think you'll be able to get a satisfactory effect. The text is so long, what are you going to do with it?

Yes, text fixed on left. Future blog posts will only have a short paragraph, so it won't be as long as that example blog post. Will each post need a unique code to create that? 

I want to be able to post multiple pictures  within my posts, but not use the gallery option. I've seen it on some other blogs like this one: https://www.ashleykane.com/my-week-in-pictures-4-10-23/

19 hours ago, providenceacademie said:

Is there a code that doesn't change, which I can put into my blog posts to have text fixed on left and images scrolling down on right?

Add the following to Design > Custom CSS.

.collection-type-blog.view-item .sqs-layout > .sqs-row > .col:first-child {

  position : sticky;
  top : 0;
  
  }

This code will apply to all blog posts and depends on the two column arrangement you showed in the example post. If not all your posts will need the sticky text then it is possible to use a tag as a means to apply the sticky effect to only some of the posts. That would need slightly altered code.

Let us know how it goes.

Thank you! I see what you mean. I do not want to add that to all blog posts. What kind of tag would I need to add to individual posts and where is that option located?

1 hour ago, providenceacademie said:

What kind of tag would I need to add to individual posts and where is that option located?

Create a tag as you've done for your blog posts. Name it something like sticky text. Put the tag on the example post you showed. Then I will update my code post with the altered code.

Thank you @creedon

Here is a post I tagged with "Sticky Text" :

https://www.providenceacademie.com/report/2023/4/30/spring-garden

30 minutes ago, providenceacademie said:

Here is a post I tagged with "Sticky Text"

Replace the previous CSS with the following.

.collection-type-blog.view-item .tag-sticky-text .sqs-layout > .sqs-row > .col:first-child {

  position : sticky;
  top : 0;
  
  }

Let us know how it goes.

@creedon  It works!! Thank you so much 🙌