Jump to content

Resolve Split Screen Issue

Recommended Posts

Site URL: https://www.similarspace.ca/saol-nua

Hi All,

I've been trying to resolve a scrolling issue on my split screen sticky scroll pages with absolutely no luck. I see you have some experience in this area, and I would really really appreciate any help!

Our website: https://www.similarspace.ca/

I was provided a code snippet to create the split screen sticky layout. I adjusted the code to target all 8 of the pages we'd like to use it on. The split and sticky left column work just fine, but when you reach the following full width section it overlaps the text on the left-hand column when we'd actually like it to register when the text ends and become sticky to scroll with the right side.

Pages affected are all the ones linked on our work page: https://www.similarspace.ca/work

In the attached video I've walked you through the issue as it appears on the page 'saol-nua' and then how it should appear as displayed on the page 'enso'. For some reason, the scroll is working correctly only on this one page, and the remaining 7 run into the overlapping text issue.

I don't have much coding experience, so there's a chance I've just mushed something up while trying to apply the text to multiple pages. Below is the code I have in place. I would love some help getting the scroll nailed down properly on all our work pages.

 

///  SPLIT LAYOUT  ///

// #collection is the ID for a specific page //
#collection-5fd247825d5a16174f514a4d, /* split layout example */
#collection-5fd3b8a3d018754912c7d361, /* saol nua */
#collection-5fd7c10e718a7b4790835611, /* enso */ 
#collection-5fd7c83d2d5c2d705758af21, /* iwo */ 
#collection-5fd12e5c5767704c6ef3fa9b, /* obabika */
#collection-5fd7d7ab0d8882116ba91933, /* hunter & hare */
#collection-5fd7e8077be9e476c9b382d9, /* fed */
#collection-5fd7eb3716b55c49c44392bf, /* wirth */
#collection-5fd7ebf262243e10b9ea2cb8 /* hanune */ {
@media (min-width:900px) {
 .sections {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
 .page-section {
   width: 100% !important;
}

  
// LEFT Section ID //
section[data-section-id="5fd247a6d060d56c49ab1038"], /* split layout example */
section[data-section-id="5fd3b8a3d018754912c7d363"], /* saol nua */
section[data-section-id="5fd7c10e718a7b4790835613"], /* enso */
section[data-section-id="5fd7c83d2d5c2d705758af23"], /* iwo */ 
section[data-section-id="5fd12feb4b6ed76e341672a6"], /* obabika */
section[data-section-id="5fd7d7ab0d8882116ba91935"], /* hunter & hare */
section[data-section-id="5fd7e8077be9e476c9b382db"], /* fed */
section[data-section-id="5fd7eb3716b55c49c44392c1"], /* wirth */
section[data-section-id="5fd7ebf262243e10b9ea2cba"] /* hanune */ {
  width: 40% !important; 
  margin-top: 0px;
}

// RIGHT Section ID //
section[data-section-id="5fd247aa329e0a201fd99043"], /* split layout example */
section[data-section-id="5fd3c683b5127b6b8416ddf2"], /* saol nua */
section[data-section-id="5fd7c10e718a7b4790835615"], /* enso */ 
section[data-section-id="5fd7c83d2d5c2d705758af25"], /* iwo */ 
section[data-section-id="5fd2a76ef1e0381452c66c0e"], /* obabika */
section[data-section-id="5fd7d7ab0d8882116ba91937"], /* hunter & hare */
section[data-section-id="5fd7e8077be9e476c9b382dd"], /* fed */
section[data-section-id="5fd7eb3716b55c49c44392c3"], /* wirth */
section[data-section-id="5fd7ebf262243e10b9ea2cbc"] /* hanune */ {
   width: 60% !important; }
.page-section >.content-wrapper {
      box-sizing: border-box !important;
    }
}
}

// Make the LEFT Section Fixed //
body:not(.sqs-edit-mode) { 
@media screen and (min-width:991px) {
section[data-section-id="5fd247a6d060d56c49ab1038"], /* split layout example */
section[data-section-id="5fd3b8a3d018754912c7d363"], /* saol nua */
section[data-section-id="5fd7c10e718a7b4790835613"], /* enso */
section[data-section-id="5fd7c83d2d5c2d705758af23"], /* iwo */ 
section[data-section-id="5fd12feb4b6ed76e341672a6"], /* obabika */
section[data-section-id="5fd7d7ab0d8882116ba91935"], /* hunter & hare */
section[data-section-id="5fd7e8077be9e476c9b382db"], /* fed */
section[data-section-id="5fd7eb3716b55c49c44392c1"], /* wirth */
section[data-section-id="5fd7ebf262243e10b9ea2cba"] /* hanune */ {
    position: block;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    width: 100%;
    top: -1px;
}
}
}

Thank you!!!!

4943648_SplitScreenScroll-StickyLeftColumn.mov43.59 MB · 2 downloads

Link to comment
  • 5 months later...
On 1/11/2021 at 5:48 AM, masegosa.alvaro said:

Site URL: https://www.similarspace.ca/saol-nua

Hi All,

I've been trying to resolve a scrolling issue on my split screen sticky scroll pages with absolutely no luck. I see you have some experience in this area, and I would really really appreciate any help!

Our website: https://www.similarspace.ca/

I was provided a code snippet to create the split screen sticky layout. I adjusted the code to target all 8 of the pages we'd like to use it on. The split and sticky left column work just fine, but when you reach the following full width section it overlaps the text on the left-hand column when we'd actually like it to register when the text ends and become sticky to scroll with the right side.

Pages affected are all the ones linked on our work page: https://www.similarspace.ca/work

In the attached video I've walked you through the issue as it appears on the page 'saol-nua' and then how it should appear as displayed on the page 'enso'. For some reason, the scroll is working correctly only on this one page, and the remaining 7 run into the overlapping text issue.

I don't have much coding experience, so there's a chance I've just mushed something up while trying to apply the text to multiple pages. Below is the code I have in place. I would love some help getting the scroll nailed down properly on all our work pages.

 

///  SPLIT LAYOUT  ///

// #collection is the ID for a specific page //
#collection-5fd247825d5a16174f514a4d, /* split layout example */
#collection-5fd3b8a3d018754912c7d361, /* saol nua */
#collection-5fd7c10e718a7b4790835611, /* enso */ 
#collection-5fd7c83d2d5c2d705758af21, /* iwo */ 
#collection-5fd12e5c5767704c6ef3fa9b, /* obabika */
#collection-5fd7d7ab0d8882116ba91933, /* hunter & hare */
#collection-5fd7e8077be9e476c9b382d9, /* fed */
#collection-5fd7eb3716b55c49c44392bf, /* wirth */
#collection-5fd7ebf262243e10b9ea2cb8 /* hanune */ {
@media (min-width:900px) {
 .sections {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
 .page-section {
   width: 100% !important;
}

  
// LEFT Section ID //
section[data-section-id="5fd247a6d060d56c49ab1038"], /* split layout example */
section[data-section-id="5fd3b8a3d018754912c7d363"], /* saol nua */
section[data-section-id="5fd7c10e718a7b4790835613"], /* enso */
section[data-section-id="5fd7c83d2d5c2d705758af23"], /* iwo */ 
section[data-section-id="5fd12feb4b6ed76e341672a6"], /* obabika */
section[data-section-id="5fd7d7ab0d8882116ba91935"], /* hunter & hare */
section[data-section-id="5fd7e8077be9e476c9b382db"], /* fed */
section[data-section-id="5fd7eb3716b55c49c44392c1"], /* wirth */
section[data-section-id="5fd7ebf262243e10b9ea2cba"] /* hanune */ {
  width: 40% !important; 
  margin-top: 0px;
}

// RIGHT Section ID //
section[data-section-id="5fd247aa329e0a201fd99043"], /* split layout example */
section[data-section-id="5fd3c683b5127b6b8416ddf2"], /* saol nua */
section[data-section-id="5fd7c10e718a7b4790835615"], /* enso */ 
section[data-section-id="5fd7c83d2d5c2d705758af25"], /* iwo */ 
section[data-section-id="5fd2a76ef1e0381452c66c0e"], /* obabika */
section[data-section-id="5fd7d7ab0d8882116ba91937"], /* hunter & hare */
section[data-section-id="5fd7e8077be9e476c9b382dd"], /* fed */
section[data-section-id="5fd7eb3716b55c49c44392c3"], /* wirth */
section[data-section-id="5fd7ebf262243e10b9ea2cbc"] /* hanune */ {
   width: 60% !important; }
.page-section >.content-wrapper {
      box-sizing: border-box !important;
    }
}
}

// Make the LEFT Section Fixed //
body:not(.sqs-edit-mode) { 
@media screen and (min-width:991px) {
section[data-section-id="5fd247a6d060d56c49ab1038"], /* split layout example */
section[data-section-id="5fd3b8a3d018754912c7d363"], /* saol nua */
section[data-section-id="5fd7c10e718a7b4790835613"], /* enso */
section[data-section-id="5fd7c83d2d5c2d705758af23"], /* iwo */ 
section[data-section-id="5fd12feb4b6ed76e341672a6"], /* obabika */
section[data-section-id="5fd7d7ab0d8882116ba91935"], /* hunter & hare */
section[data-section-id="5fd7e8077be9e476c9b382db"], /* fed */
section[data-section-id="5fd7eb3716b55c49c44392c1"], /* wirth */
section[data-section-id="5fd7ebf262243e10b9ea2cba"] /* hanune */ {
    position: block;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    width: 100%;
    top: -1px;
}
}
}

Thank you!!!!

4943648_SplitScreenScroll-StickyLeftColumn.mov43.59 MB · 2 downloads

  •  

Have you got it sorted

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
  • 2 weeks later...
On 1/11/2021 at 5:48 AM, masegosa.alvaro said:

Site URL: https://www.similarspace.ca/saol-nua

Hi All,

I've been trying to resolve a scrolling issue on my split screen sticky scroll pages with absolutely no luck. I see you have some experience in this area, and I would really really appreciate any help!

Our website: https://www.similarspace.ca/

I was provided a code snippet to create the split screen sticky layout. I adjusted the code to target all 8 of the pages we'd like to use it on. The split and sticky left column work just fine, but when you reach the following full width section it overlaps the text on the left-hand column when we'd actually like it to register when the text ends and become sticky to scroll with the right side.

Pages affected are all the ones linked on our work page: https://www.similarspace.ca/work

In the attached video I've walked you through the issue as it appears on the page 'saol-nua' and then how it should appear as displayed on the page 'enso'. For some reason, the scroll is working correctly only on this one page, and the remaining 7 run into the overlapping text issue.

I don't have much coding experience, so there's a chance I've just mushed something up while trying to apply the text to multiple pages. Below is the code I have in place. I would love some help getting the scroll nailed down properly on all our work pages.

 

///  SPLIT LAYOUT  ///

// #collection is the ID for a specific page //
#collection-5fd247825d5a16174f514a4d, /* split layout example */
#collection-5fd3b8a3d018754912c7d361, /* saol nua */
#collection-5fd7c10e718a7b4790835611, /* enso */ 
#collection-5fd7c83d2d5c2d705758af21, /* iwo */ 
#collection-5fd12e5c5767704c6ef3fa9b, /* obabika */
#collection-5fd7d7ab0d8882116ba91933, /* hunter & hare */
#collection-5fd7e8077be9e476c9b382d9, /* fed */
#collection-5fd7eb3716b55c49c44392bf, /* wirth */
#collection-5fd7ebf262243e10b9ea2cb8 /* hanune */ {
@media (min-width:900px) {
 .sections {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
 .page-section {
   width: 100% !important;
}

  
// LEFT Section ID //
section[data-section-id="5fd247a6d060d56c49ab1038"], /* split layout example */
section[data-section-id="5fd3b8a3d018754912c7d363"], /* saol nua */
section[data-section-id="5fd7c10e718a7b4790835613"], /* enso */
section[data-section-id="5fd7c83d2d5c2d705758af23"], /* iwo */ 
section[data-section-id="5fd12feb4b6ed76e341672a6"], /* obabika */
section[data-section-id="5fd7d7ab0d8882116ba91935"], /* hunter & hare */
section[data-section-id="5fd7e8077be9e476c9b382db"], /* fed */
section[data-section-id="5fd7eb3716b55c49c44392c1"], /* wirth */
section[data-section-id="5fd7ebf262243e10b9ea2cba"] /* hanune */ {
  width: 40% !important; 
  margin-top: 0px;
}

// RIGHT Section ID //
section[data-section-id="5fd247aa329e0a201fd99043"], /* split layout example */
section[data-section-id="5fd3c683b5127b6b8416ddf2"], /* saol nua */
section[data-section-id="5fd7c10e718a7b4790835615"], /* enso */ 
section[data-section-id="5fd7c83d2d5c2d705758af25"], /* iwo */ 
section[data-section-id="5fd2a76ef1e0381452c66c0e"], /* obabika */
section[data-section-id="5fd7d7ab0d8882116ba91937"], /* hunter & hare */
section[data-section-id="5fd7e8077be9e476c9b382dd"], /* fed */
section[data-section-id="5fd7eb3716b55c49c44392c3"], /* wirth */
section[data-section-id="5fd7ebf262243e10b9ea2cbc"] /* hanune */ {
   width: 60% !important; }
.page-section >.content-wrapper {
      box-sizing: border-box !important;
    }
}
}

// Make the LEFT Section Fixed //
body:not(.sqs-edit-mode) { 
@media screen and (min-width:991px) {
section[data-section-id="5fd247a6d060d56c49ab1038"], /* split layout example */
section[data-section-id="5fd3b8a3d018754912c7d363"], /* saol nua */
section[data-section-id="5fd7c10e718a7b4790835613"], /* enso */
section[data-section-id="5fd7c83d2d5c2d705758af23"], /* iwo */ 
section[data-section-id="5fd12feb4b6ed76e341672a6"], /* obabika */
section[data-section-id="5fd7d7ab0d8882116ba91935"], /* hunter & hare */
section[data-section-id="5fd7e8077be9e476c9b382db"], /* fed */
section[data-section-id="5fd7eb3716b55c49c44392c1"], /* wirth */
section[data-section-id="5fd7ebf262243e10b9ea2cba"] /* hanune */ {
    position: block;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    width: 100%;
    top: -1px;
}
}
}

Thank you!!!!

4943648_SplitScreenScroll-StickyLeftColumn.mov43.59 MB · 2 downloads

  •  

Do you need help with these?

Site URL: https://www.similarspace.ca/

1. (Mobile-About) Make text-number same line, same as desktop/tablet?

https://www.similarspace.ca/about

similarspace.ca-01-min.png

2. (Tablet-Header) Maybe the circle in the logo is cut off a bit on the top and right side

similarspace.ca-02-min.png

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

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.