Customize the Banner Slideshow With CSS
DO YOU HATE SQUARESPACE’S BANNER SLIDESHOW?
Yeah, me too. Every time a client asks for a slider I dread having to find a way to make it look kind of okay-ish. But, since this is a pretty common request, I finally set out to find the absolute best ways to style the banner slideshow.
First, I’ll show you some general styling tips just using the built-in features on Squarespace. Next, we’ll get into some CSS to help polish the look and customize even further.
GENERAL IMPLEMENTATION AND STYLING INSIGHTS
CREATING A HERO SLIDER (2 STYLES!)
CREATING A TESTIMONIAL SLIDER
CSS HACKS:
Awesome, the banner slideshow is looking better! But there’s still some issues. Let’s fix them with CSS! Scroll down for all the CSS below the video :)
Banner slideshow photo overlay
If you chose not to have a card behind your text, the text probably isn’t very legible over the background images. Let’s add a photo overlay to the entire slideshow:
Tip! Adjust the background color as needed.
// banner slideshow overlay //.slide-media-container:after {content: “”;background-color: rgba(0,0,0,0.15);position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 9099;}.slide-content.list-item-card-background {z-index: 99999999999999;}Banner slideshow font size on mobile
Most of the time, the font ends up being WAY too big on mobile. Especially if you’re using both a title and a description. This CSS will help you change the font size ONLY for mobile.
Tip! Adjust the font size + replace the section ID. Here’s how to find it →
// banner slideshow mobile title //@media screen and (max-width: 740px) {SECTION-ID {h2.list-item-content__title {font-size: 20px !important; }}}// banner slideshow mobile description //@media screen and (max-width: 740px) {SECTION-ID {.list-item-content__description {font-size: 12px !important; }}}