How to align content left column width right column - Forum | JoomShaper
Solved SP Page Builder

How to align content left column width right column

Asked by Mike Vanbelleghem 2 weeks ago Last activity 1 week ago

In sp page builder I have a section & 2 columns, the right column contains 2 picture above each other and the left column has a small text.
How can I specify it so that the text always stays on top when I scroll down until it hits the bottom of the 2nd image ? it's a kind of sticky
thx, Mike

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff
2 weeks ago

Yes, Customizations fall outside our scope of support, so you will need to implement this custom code on your end.

Thank you for your understanding.

4 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
2 weeks ago

Hi,

Thanks for contacting us. There is no default option to do that, you have to customize it yourself. But I will give you a hint, it may help you.

This can be done with CSS using position: sticky.

Give the left column a custom CSS class, for example:

.sticky-column {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

Then add sticky-column to the CSS Class field of the left column.

The top: 20px controls how far the text stays from the top of the browser window while scrolling.

One important point: the sticky element needs to be inside the same parent/section that contains the two columns. Also check that none of the parent containers has overflow: hidden, overflow: auto, or overflow: scroll, as this can prevent position: sticky from working.

If you want the text to stop exactly when the bottom of the second image is reached, the two columns should remain inside the same row/section. The sticky element will then stop at the bottom of its parent container.

For example:

.sticky-column {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

This is generally the simplest way to achieve the effect in SP Page Builder without adding JavaScript.

-Regards.

Mike Vanbelleghem Asked this
2 weeks ago

Hi, just tried it, but it's not working,
i added this code to the "custom css" in the settings of the left column, and above i added the sticky-column in the "css class", also checked the overflow, which is not set.
any other suggestion ?
regards

Mehtaz Afsana Borsha Staff
2 weeks ago

You have to choose your sites CSS classes, then it will work. This blog will help you to find your CSS class name.

https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

Mike Vanbelleghem Asked this
2 weeks ago

Dear,
Ok, I'll have to dive into this, I tried to manually change it with the code inspector, doesn't work for the moment, as I'm not an expert I'll have to spend some (much) more time into it ...
regards

Mike Vanbelleghem Asked this
2 weeks ago · edited

Solved it, using chatgpt :-)

add this in the settings of the column :
CSS Class = sticky-column

add this to custom code section of the template :

.body-innerwrapper {
    overflow-x: clip;
}
.sticky-column {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    height: fit-content;
}
Mehtaz Afsana Borsha Staff
1 week ago

Glad to know that and thanks for accepting the answer.

Log in to reply.