In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out https://insidethesquare.co/fluid
—
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
This tutorial is specific for version 7.1. If you are using a brine theme site with index pages, check out this tutorial instead: https://youtu.be/6L04o4pvToo
—
In this tutorial I am going to show you how to use custom CSS to pull an image up so it hovers between two sections of your site.
A few important things to note before you copy and paste the code below into your own site:
✨ There is more than one way to do this! This is just one approach of many because code is super customizable.
🔗 Here is a link to the tutorial on how to install this code on a single page in your Squarespace site: https://www.youtube.com/watch?v=kX6kRjCbzu8
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
🔮 Here is a link to the chrome extension I use to easily find block ID’s in Squarespace. Please note I am not affiliated with them in any way, I just use this extension in my own work! https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
This code will add a negative top margin to an image on your site so it will hover between two sections.
.sqs-block-image {margin-top:-50%}
If you are trying to target a specific image with a block id (which I STRONGLY recommend) add that block id like this:
#block-yui-123456789 {margin-top:-50%}
Want to adjust this code for the mobile version of your site? Add this media query in a new line to make sure it only applies to screens smaller than 640px in width. Don’t forget to change that example text to the right block id!
@media only screen and (max-width:640px) { #block-yui-123456789 {margin-top:-50%}}
—
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
