Make a column of differents block (text + image + shop button) fix when scrolling down the page

Site URL: https://www.simonguillemin.com/travel-snowflakes

Hey dear folks & the boss @tuanphan 🙂

I would like to make the right column of a page which contains differents block (text + image + shop button) fix when scrolling down the page.

I want people be able to see the content on the left while they can always get acces to the text of the right.

Also I would need this fix column on the right stop before the bottom of the windows just before the large block picture at the bottom 

https://www.simonguillemin.com/travel-snowflakes
password : 0009

THANKS A LOT for your help 🙂❤️

I tried this without success :

 

/* sticky text */
@media screen and (min-width:50%) {
div#page-section-yui_3_17_2_1_1636017274785_162.row .span-4 {
    position: sticky;
    top: 0;
}
}

Up 🙂 @tuanphan if you come here 🙂

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#page-section-617ffbaaf731bf2ea98d7116 .span-6:last-child {
    position: sticky;
    position: -webkit-sticky;
    top: 80px;
}
}

@tuanphan Thanks a lot ! Could you explain to me why did you set min-width on 768px ?
And also why does it fix only the right column whereas the #617ffbaa..... code seems included the 2 columns ?

 

On 11/7/2021 at 3:55 PM, SimonG said:

@tuanphan Thanks a lot ! Could you explain to me why did you set min-width on 768px ?
And also why does it fix only the right column whereas the #617ffbaa..... code seems included the 2 columns ?

 

If don't set 768px, it will run on mobile. It will be ugly on mobile (If you want to test on mobile, just change 768px to 1px