Squarespace Hide Carousel List Section Arrows on Mobile [Simple CSS Tutorial]

A client recently asked me what I thought was an usual request, how to hide carousel list section arrows on mobile, but keep them on desktop.

After I’d implemented this on their Squarespace website I realized there could be plenty more people out there looking to do the same.

Keep reading to find out how to do it.

Watch the video

Check out the YouTube video below 👇

To hide the arrows of your carousel list section on mobile only head to the mobile view of your website (by clicking the mobile icon in the top right corner) and scroll to the list section carousel you want to edit.

On Google Chrome you then need to hit Shift + Command + C and this will bring up Google Chrome Developer Tools.

Hover over the arrows you want to remove and find the selector. Copy this.

Head to Website > Pages > Website Tools > Custom CSS and paste the selector into the code box.

You then need to add:

.user-items-list-carousel .mobile-arrows {

display: none;

}

---

📩 Join the inner circle to get exclusive code updates

---

Hit save and it’s that simple, you’ll have removed the carousel arrows from mobile but they’ll still be visible on desktop.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?