Jump to content


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by tddrchrdsn

  1. Fixed. I had to re-position the fixed left column code block in the editor so that it wasn't to the left of all the other blocks (the right column) but above them. I then set the width and margin-left declarations for the .Main-content element to 50%.
  2. Site URL: https://anxioussound.com/aoty-2021 Hello, I'm using the Foster template in Squarespace 7 and I'm trying to create a two-column layout where the left column is fixed (non-scrolling) and 100vh, and the right column is scrollable. I was able to get the layout I want in the editor by creating a new fixed code block and positioning it to the left of all other content (top image). The problem is, as I soon as I save the layout and leave the editing state, the content in the right column jumps to the left, overlapping with the fixed column (bottom image). Why does the layout change when I leave the editor? Is there something I'm overlooking in the code?
  3. Thanks for the reply. A fixed position won't work in this scenario, since I need the header for each individual page in the index to stick based on scroll position (see my note at the bottom of my post). To make this more clear, I added the page to an index: https://anxioussound.com/aoty2 I'd like the 2020 header (left column) to stick when viewing the 2020 page content, and the 2019 header to stick when the scroll position reaches the 2019 page content.
  4. Site URL: https://anxioussound.com/aoty-2020-2 Hello, I'm using the Foster template in V7. I have a page with two columns: 25% 75% The left column contains a div I would like to make sticky (sticks to the top of the browser window on scroll). Here is the HTML: <div class="aoty-yr-container"> <div class="aoty-yr sticky"> <h1> 2020 </h1> <h2> The past is full of dead men / The future is a cruelty </h2> <p> Protomartyr </p> </div> </div> Here is the CSS: .aoty-yr-container { overflow: visible!important; background: pink; height: 2000px; } .aoty-yr { height: auto; } .aoty-yr h2 { padding-top: 40px!important; height: auto; } .sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background: wheat; } Two issues here: 1. I need the left column — .aoty-yr-container (pink background) — to be the same height as the column on the right (the 2000px height was an arbitrary choice to make sure the sticky element's parent container had a height value). How can I achieve this? 2. I've been unable to get the .sticky element to work — .aoty-yr sticky (wheat background). Any assistance would be greatly appreciated. Note: Eventually, this page will become one of several within an index, each with a similar code block that will stick depending on scroll position. Thanks in advance!
  • 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.