Jump to content

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

Recommended Posts

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.

 

Link to comment
  • Replies 7
  • Views 2.6k
  • Created
  • Last Reply

Top Posters In This Topic

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

A brand designer & strategist creating brands that bridge the gaps between artistry, strategy, and thoughtful consideration. Creator of Studio Founded, a digital resource library for purposeful business owners. 
💻 Shop Squarespace Templates
✍️ Curated Business Resources

🥰 Complimentary Downloadables
🤍 Bespoke Branding & Websites

Links in my posts may be affiliate links.

Link to comment

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

Edited by basianiez
Link to comment

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

A brand designer & strategist creating brands that bridge the gaps between artistry, strategy, and thoughtful consideration. Creator of Studio Founded, a digital resource library for purposeful business owners. 
💻 Shop Squarespace Templates
✍️ Curated Business Resources

🥰 Complimentary Downloadables
🤍 Bespoke Branding & Websites

Links in my posts may be affiliate links.

Link to comment
  • 1 month later...

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

Zrzut ekranu 2023-12-4 o 10.58.18.png

Edited by basianiez
pw to the site
Link to comment
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

Zrzut ekranu 2023-12-4 o 10.58.18.png

Hi,

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

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

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)

Zrzut ekranu 2023-12-7 o 12.43.18.png

Zrzut ekranu 2023-12-7 o 12.43.25.png

Zrzut ekranu 2023-12-7 o 12.43.34.png

Zrzut ekranu 2023-12-7 o 12.43.44.png

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.