Jump to content

vvc

Circle Member
  • Posts

    25
  • Joined

  • Last visited

Reputation Activity

  1. Love
    vvc reacted to Beyondspace in Split Sticky Sections   
    you site look great now
  2. Thanks
    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
  3. Like
    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!!!!
  4. Like
    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!
  5. Like
    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.
  6. Like
    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?
     
  7. Like
    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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.