-
Posts
25 -
Joined
-
Last visited
Reputation Activity
-
-
vvc reacted to Beyondspace in Split Sticky Sections
The sticky css requires the container overflow: visible, I saw you had a overflow-x: hidden in parent, therefore not working, try to replace the code provided with this snippet
@media only screen and (min-width: 768px) { #page { overflow-x: visible; } section[data-section-id="5fe8e0079151d82f6a094c5d"] .content > .sqs-layout > .row .col:nth-child(1){ position: sticky; top: 25px; } section[data-section-id="5fe8e0079151d82f6a094c5d"] .content > .sqs-layout > .row .col:nth-child(2){ position: sticky; top: 25px; } } the nth-child(1) and nth-child(2) indicated that first 2 column should be sticky
-
vvc got a reaction from Beyondspace in Split Sticky Sections
@bangank36you are a genius! it worked, thank you! I had to add !important; after the
overflow-x: visible; Does this code mean that however many spacer blocks I have don't matter anymore?
THANK YOU!!!!
-
vvc got a reaction from Beyondspace in Split Sticky Sections
@bangank36 Thank you, that's what I figured.
Would it be easier if we made the "background" sticky rather than the code blocks sticky?
So I have this code in another section that automatically splits the screen and makes the background image 50%:
section[data-section-id="5fe8fd485e66733f024138be"] {
background-color:#fff;
@media(min-width:767px){
.section-background{
width:50%;
margin-left:50%;
}
.content-wrapper {
width:50%;
margin-right:50% !important;
}
}
@media(max-width:767px){
display:flex;
flex-direction:column;
.section-background, .content-wrapper{
position:relative;
}
.content-wrapper{
order: 1
}
.section-background{
height:200px;
order: 2;
}
}
}
Thank you so much for your help!
-
vvc got a reaction from Beyondspace in Split Sticky Sections
@bangank36 Let me know if there is a layout that is easiest. I don't quite understand the code, especially
.sqs-layout .row .span-2 and
.sqs-layout .row .span-4
Do you mind explaining to me what they mean?
Right now I have 5 overall spacer blocks spread across, and mini spacer blocks underneath the 3rd spacer blocks to make the logos smaller.
-
vvc got a reaction from Beyondspace in Split Sticky Sections
Just tried it, nothing changed! How should my spacer blocks be set up? Does that affect it?
-
vvc got a reaction from Beyondspace in Split Sticky Sections
@bangank36Do you mind helping me with a section on my site I want to make sticky?
This is the section I want to make sticky, 2 images on one side, texts/small logos on other. I've tried to change the section ID and made 6 columns, but still not working. What am I doing wrong? Thank you!
SITE URL: https://orb-plane-ft2t.squarespace.com/ PW: elyssa