basianiez

thank you 🙏🏼

Hello! I have same issue, but unfortunately none of CSS works. I would like to keep my gallery slideshow full screen on desktop, but on mobile the vertical full screen aspect ratio doesn't work for my images. Website: https://piano-sheep-9pcl.squarespace.com/ker-and-downey pw: newafs123 Would appreciate the help!

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)

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

Hello, so I managed to apply the code into a header of the site and the result is very close to what I'm looking for! It does turn independent scrolling on the left screen, but when I scroll on the right, then the whole page is moving and I'd like the section to scroll "independently" as in here https://morrisand.company/work/215-217-mare-street (left side scrolls, right sticks and vice versa). Another issue I find is that the section on the right doesn't start at its top. I created a gallery block on this section but after applying a split screen, the first few images disappear (see the screen shot). link to my page: https://radish-drum-pf7t.squarespace.com/portfolio/casa-sd pw: 321studio That's the code I'm using (plus Will Myers split screen plugin): <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) { section[data-section-id="65649017048cf923c94d2869"] { flex-grow: 1; width: 50%; overflow-y: scroll; height: 100vh; } section[data-section-id="6569f0a9db14d624e40eb8f8"]{ flex-shrink: 0; width: 50%; /* Adjust the width as needed */ overflow-y: scroll; height: 100vh; } </style>

Hello @KaamDeir thank you so much for your reply. I've inserted the code to the Code Injection of the header. I do have a question to the 2nd point. How can I assign a class of "left-container" and "right-container" to my sections? Is there a need to keep the code I used from Will Myers split screen?

Hello, I'm working on a page where I want to divide my content into 2 scrolling split sections. (example: https://morrisand.company/work/215-217-mare-street) I'm using Will Myers plugin to split sections, but this plugin doesn't support such modification. Is there any other way I can achieve that? I would like my content on the left side to start on the top of the section and scroll down through the process of the project. For the right side, I'd like to have a scrolling grid gallery. link to my page: https://radish-drum-pf7t.squarespace.com/portfolio/casa-sd pw: 321studio I'd be very grateful for any leads 🙏

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

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

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.

Thank you so much! Exactly what I was looking for 🙂

Hi, I have designed an image for a banner for desktop measurements, but in mobile view it's misplaced (see attached). Is there a code that will allow to resize an image for a mobile view? Or, is there a way to add another image for a mobile view? My site's still in the making. Here's the link: https://guitar-okra-c62j.squarespace.com/home password: 'mtoni1'

Thank you tuanphan!

Hello, I'm wondering if there is a way to modify the navigation labels on my portfolio page. I would like to replace the project names with the words "previous" and "next" to improve navigation clarity. Is there a code or solution available to achieve this modification? my website is https://imarastudios.net/ I'm made a screenshot of the section of the navigation I'd like to change.