Jump to content

Fix scroll section

Recommended Posts

Site URL: https://andpartners.squarespace.com

Hi, I have added coding to my site to give the "Team" section (630cad242339ed23645ad090) a fix scroll effect. I want the "Team" wording to stay while it scrolls through the gallery. I have used the below code, but it does not seem to work (It works on another site of mine). I have fluid engine disabled for this section. Can someone help?

 

The site password is partner.

 

// Split section //

section[data-section-id="630cad242339ed23645ad090"] {
  padding-top: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;

  .content-wrapper  {
    padding: 0px !important;
    margin: 0px auto;
    display: contents;
  }

  .sqs-layout .sqs-row .sqs-block {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    padding-left: 0px !important
  }

  figcaption {
    padding-top: 100px !important;
  }
}

.image-card-wrapper .sqs-dynamic-text-container {
  padding: 30px !important;
}

// Fix split //

@media screen and (min-width:768px) {
section[data-section-id="630cad242339ed23645ad090"] {
    overflow: visible !important;
}
div#page-section-630cad242339ed23645ad090 .span-6:first-child {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
html {overflow-x:hidden;}
}

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

1 hour ago, charlineca said:

Site URL: https://andpartners.squarespace.com

Hi, I have added coding to my site to give the "Team" section (630cad242339ed23645ad090) a fix scroll effect. I want the "Team" wording to stay while it scrolls through the gallery. I have used the below code, but it does not seem to work (It works on another site of mine). I have fluid engine disabled for this section. Can someone help?

 

The site password is partner.

 

// Split section //

section[data-section-id="630cad242339ed23645ad090"] {
  padding-top: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;

  .content-wrapper  {
    padding: 0px !important;
    margin: 0px auto;
    display: contents;
  }

  .sqs-layout .sqs-row .sqs-block {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    padding-left: 0px !important
  }

  figcaption {
    padding-top: 100px !important;
  }
}

.image-card-wrapper .sqs-dynamic-text-container {
  padding: 30px !important;
}

// Fix split //

@media screen and (min-width:768px) {
section[data-section-id="630cad242339ed23645ad090"] {
    overflow: visible !important;
}
div#page-section-630cad242339ed23645ad090 .span-6:first-child {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
html {overflow-x:hidden;}
}

Which gallery do you mention?

image.thumb.png.d1b976e1b673541c715924177c19899a.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.