Squarespace Guide: Stop Video Background Being Cut Off by Header
One of the most annoying things to happen when I’m designing Squarespace websites is when I add a great video to the hero section of the web page, only for the top of the video to be cut off by the website header.
It looks messy and unprofessional. Luckily for you, I came up with some simple code to stop this from happening.
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
Once you’ve uploaded your video to your hero section, head to Website > Website Tools > Custom CSS and add in the following code:
#SECTION-ID {
margin-top: 100px;
}
Use your Google Chrome Squarespace Block ID finder plugin to get the section ID for your hero section and add this before your code brackets. This tells Squarespace that this code is to target that section.
You can have a play around with the amount you choose for the px within the code, moving your hero section down just enough to stop your video being cut off.
Once you’re happy with how it looks, don't forget to check the mobile view (you may need to adjust your px if it doesn’t quite line up on mobile) and then hit save.
This is a handy piece of code to have in your resource bank for when you're building Squarespace websites.
For more tips and tricks check out my blog full of Squarespace resources.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
