Jump to content

LisaLenkens

Circle Member
  • Posts

    7
  • Joined

  • Last visited

Everything posted by LisaLenkens

  1. Hey Everyone, If anyone is looking for a way to animate the announcement bar with multiple announcements, I've created a tutorial, as I couldn't find it anywhere on the forum. It might help you if you are looking for this. I noticed it on the squarespace general website and wanted it too! See outcome in this video and the tutorial is here https://lisalenkens.com/animated-announcement-bar/ Good luck, if you have any questions, feel free to ask me! Lisa
  2. Hey, this code might be of help, this is for fluid engine btw. see more info on my website https://lisalenkens.com/split-scroll-screen-sticky-column/ @media only screen and (min-width: 700px) { // Add these lines for your section to be on flex display // section[data-section-id="HERE_YOUR_SECTION_ID"] { display: flex; flex-direction: row; } // Add these lines for your column to be sticky and stick to the top + 80px, you can adjust this to your liking // section[data-section-id="HERE_YOUR_SECTION_ID"] .fe-block-HERE_YOUR_BLOCK_ID { position: sticky !important; top: 80px !important; } // Add these lines to be able to edit your section and blocks as usual // section[data-section-id="HERE_YOUR_SECTION_ID"] .is-editing div .fe-block-HERE_YOUR_BLOCK_ID { position: absolute !important; top: 0px !important; } } Replace the section ID's with your ID's and the fe-block as well. good luck!
  3. Found the solution!!! Here is my piece of code to make split screen scrolling in fluid engine + normal in editor mode. See full tutorial on https://lisalenkens.com/split-scroll-screen-sticky-column/ Hope it will help someone else as well! @media only screen and (min-width: 700px) { .page-section:nth-child(2) { display: flex; flex-direction: row; } .page-section:nth-child(2) div:nth-child(2) { position: sticky !important; top: 80px !important; } .page-section:nth-child(2) .is-editing div:nth-child(2) { position: absolute !important; top: 0px !important; } }
  4. Thanks! I don't want to rely on a plugin, as I have the desired result in the website, but just the editor that is messed up a bit. It looks like it takes up the space from the 'sticky' element and then the content begins after that, which makes the content boxes in the editor overflowing / move to the bottom of their boxes. see screenshot. Ideally I would like to have a line of code to unset this sticky element just for the edit mode. I found the classes .is-editing and .sqs-edit-mode-active. Any ideas for this? Thanks
  5. Hey, I would love to create this scrolling effect in one column in fluid engine. see https://nayatraveler.squarespace.com/journeys-peru-walking as example. I've got this so far https://bat-parakeet-pken.squarespace.com/, password: testing. which works, but it messes up my editor mode and can't edit properly. I know a lot of questions have been asked, but haven't found the right solution for this in fluid engine. Appreciate the help! Thanks
  6. Hey, How do I get my 4 code blocks (that are in one row on desktop size) to be spread in, 2 rows with 2 blocks, in smaller screens and tablet view (not mobile as I can customize that). so I have 1 2 3 4 and I would like to have 1 2 3 4 I tried to change the fluid engine grid-template-columns but that didn't work as I change the fluid engine columns. 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.