DevonLois Posted May 8, 2023 Share Posted May 8, 2023 Looking for help with a blog post layout. I'd like the first column (text) to stop scrolling when the end of it's content is reached while the second column (images) continues scrolling. Any help would be very much appreciated! Website HERE password: mochimochi Link to comment
tuanphan Posted May 10, 2023 Share Posted May 10, 2023 Try adding to Design > Custom CSS @media screen and (min-width:901px) { div#item-6456b25b81a7df1f2bce5560 .span-5 { position: sticky; top: 0; position: -webkit-sticky; z-index: 9999; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DevonLois Posted May 10, 2023 Author Share Posted May 10, 2023 14 hours ago, tuanphan said: Try adding to Design > Custom CSS @media screen and (min-width:901px) { div#item-6456b25b81a7df1f2bce5560 .span-5 { position: sticky; top: 0; position: -webkit-sticky; z-index: 9999; } } Looks amazing, @tuanphan any way to make the code applicable to all blog posts, not just the one? Thank you!! Link to comment
tuanphan Posted May 12, 2023 Share Posted May 12, 2023 Each page has a different structure, try this, but I'm not sure it will work with all posts @media screen and (min-width:901px) { .blog-item-content .sqs-layout.columns-12 .span-5 { position: sticky; top: 0; position: -webkit-sticky; z-index: 9999; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DevonLois Posted May 12, 2023 Author Share Posted May 12, 2023 6 hours ago, tuanphan said: Each page has a different structure, try this, but I'm not sure it will work with all posts @media screen and (min-width:901px) { .blog-item-content .sqs-layout.columns-12 .span-5 { position: sticky; top: 0; position: -webkit-sticky; z-index: 9999; } } Seems to work for all posts @tuanphan !! Although the left column sticks halfway and continues after additional scrolling. Any way to make scrolling seamless to stick at the end of the content only? Link to comment
tuanphan Posted May 14, 2023 Share Posted May 14, 2023 Hi, I don't know this. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DevonLois Posted May 14, 2023 Author Share Posted May 14, 2023 16 hours ago, tuanphan said: Hi, I don't know this. No problem, tinkering with it. I'm thinking the solution isn't sticky now... Trying to get both columns to scroll together until aligned at baseline, as seen on THIS SITE for example. Inspecting their code shows a fixed position column with variable top... Thank you for your help @tuanphan ! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment