Скачать или смотреть Creating a Testimonial Slider Using the Squarespace Banner Slideshow | Part 3

✨Check out these guides and CSS tricks to help implement and customize the Squarespace Banner Slideshow. Let's break it down into four videos:

1. General implementation and styling insights
   • Implementing & Styling a Squarespace Banne...  

2. Creating a Hero slider (2 styles!)
   • Creating a Hero Slider Using the Squarespa...  

3. Creating a testimonial slider
   • Creating a Testimonial Slider Using the Sq...  

4. CSS Hacks:
   • Squarespace Banner Slideshow CSS Hacks | P...  

💻 You can make this process even easier by grabbing our Section Template: https://www.ajmexperience.com/squares...

✨ Check out our favorite banner slideshow plugins to make it easier: https://elfsight.com/?affise_click_id...

🔗 Original post:
https://ajmexperience.com/learn-posts...

🎥 Subscribe for more Squarespace CSS Hacks and tips:
   / @ajmexperience  

💡 For more Squarespace tips to enhance your website designs, check out the rest of the learn series: https://ajmexperience.com/learn

🖥️ Save hours of wireframing and mobile optimization with our Layout Templates
https://www.ajmexperience.com/squares...

📌 Follow along on Pinterest:
  / ajmdesignstudio  

📖 Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...

📚 Get our full CSS Library:
https://www.ajmexperience.com/squares...

📸 Follow us on Instagram:
  / ajmexperience  

——————

✨HERE’S THE CODE:✨

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; }}}

——————

🛠️ Our Favorite Tools:
✨ ElfSight ⇨ https://go.elfsight.io/click?pid=1575...
💻 AJM Squarespace CSS Library ⇨ https://www.ajmexperience.com/squares...
👻 Ghost Squarespace Plugins ⇨ https://ghostplugins.peachs.co/a/ajme...
🧩 SQSP Themes Plugins ⇨ https://transactions.sendowl.com/stor...
📐 Squarespace Layout Templates ⇨ https://www.ajmexperience.com/squares...
🌐 Squarespace ⇨ https://squarespace.syuh.net/c/496021...

——————

AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/

☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm

Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.

——————

⚠️ This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)