How to achieve split screen with vertical scrolling on both sides?

Hello Squarespace community. 

I'd like to achieve a split screen design like here in an example (https://morrisand.company/work/215-217-mare-street)

Is it there a code I can use to have different content scrolling on two sides of the screen? 

What Squarespace template is recommended to build upon such design? 

On a home page I'd like to have a vertical navigation (as in the example's home page). The code I found for this is:
 

// VERTICAL NAVIGATION //

@media only screen and (min-width:600px) {   

  .page-section:first-of-type {     

    padding-top:0px !important;   

  }   

  .page-section {     

    margin-left:400px;   

  }   

  #header {     

    width: 300px;     

    position: fixed;     

    height: 100vh;     

    z-index: 99999 !important;     

    display: table;     

    writing-mode: vertical-r;    

    text-orientation: mixed;     

  }   

  .header .header-announcement-bar-wrapper {     

    padding: 10px 30px 10px 10px;   

  }   

  .header-inner{    

    height: 100vh;     

    display: table-cell;     

    vertical-align: middle;   

  } 

}

Would this code enable me to achieve a navigation like in the example? 

I'd be very grateful for any leads and find out if Squarespace offers more complex customizations like this.

I found this guide, but I'm not sure if that's apply to example I sent. 

https://www.will-myers.com/articles/split-layout-design-in-squarespace-71

Hi @basianiez,

@WillMyers Split Screen Layout plugin will be perfect for your split layout (and yes, you can make make one side 'stick' in place while the other scrolls).

Your example site looks like it uses a slide out mobile style navigation on desktop. I think this plugin would work for you!

— Hannah
Studio Founded

Hi Hannah @studiofounded,

And when it comes to the choice of template, are there any in particular that offer more flexibility? 

Thank you so much for these links to plugins. That's very helpful and probably what I'm looking for.

For a newby web designer like me, the support from Squarespace community is invaluable! 🙏🏼

All the best,

Basia

Hi @basianiez

Glad the plugin links were helpful 😊

If you use 7.1, all the templates include the same features so you can choose any!

— Hannah
Studio Founded

Hello! Thank you again for a lead to Will Myers plugin. It almost provided the result I needed - to have a split screen layout with independent scrolling on both sides. I was adviced to apply this code to achieve it :

<style> 

/* Adjust the split-section layout */

.content-wrapper {

  display: flex;

  align-items: stretch;

  overflow: hidden;

}

/* Apply styles only on desktop */

@media screen and (min-width: 768px) {

  .left-container {

    flex-grow: 1;

    width: 50%;

    overflow-y: scroll;

    height: 100vh;  

  }

.right-container {

    flex-shrink: 0;

    width: 50%; /* Adjust the width as needed */

    overflow-y: scroll;

    height: 100vh;

}

</style>

When applying it I get the effect I need, although the section on the right does not display the content properly, like it would misplace the gallery block (see attachment).

Is there a way I can adjust my code to have my sections begin from the top? 

link to the page: https://radish-drum-pf7t.squarespace.com/portfolio/casa-sd
pw: 321studio

On 12/5/2023 at 3:00 PM, basianiez said:

Hello! Thank you again for a lead to Will Myers plugin. It almost provided the result I needed - to have a split screen layout with independent scrolling on both sides. I was adviced to apply this code to achieve it :

 

<style> 

 

/* Adjust the split-section layout */

.content-wrapper {

  display: flex;

  align-items: stretch;

  overflow: hidden;

}

 

/* Apply styles only on desktop */

@media screen and (min-width: 768px) {

  .left-container {

    flex-grow: 1;

    width: 50%;

    overflow-y: scroll;

    height: 100vh;  

  }

 

.right-container {

    flex-shrink: 0;

    width: 50%; /* Adjust the width as needed */

    overflow-y: scroll;

    height: 100vh;

  

}

</style>

When applying it I get the effect I need, although the section on the right does not display the content properly, like it would misplace the gallery block (see attachment).

Is there a way I can adjust my code to have my sections begin from the top? 

 

link to the page: https://radish-drum-pf7t.squarespace.com/portfolio/casa-sd
pw: 321studio

Hi,

It looks fine to me. You try checking in preview mode

Hi @tuanphan thanks for taking a look at this. I might have disabled the code when editing the page. 

If you could kindly check again these 2 links, this is where I've applied the code again:

https://radish-drum-pf7t.squarespace.com/portfolio/psycle
https://radish-drum-pf7t.squarespace.com/portfolio/casa-sd

pw: 321studio

In the editing mode for the left section I've made sure the spacing between text and image blocks is even, but then in the preview mode is all different, which doesn't look tidy (see attached image)
For the section on the right I've applied a gallery block, but the first photo is cropped (see comparison with the lightbox view)

So I'm wondering, what's the way to:

- make spacing between image and text blocks even (left side)

- have photos displaying from the top of the section (right side)