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 👇
Want a framework for designing the perfect homepage?
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;
}
Hit save and it’s that simple, you’ll have removed the carousel arrows from mobile but they’ll still be visible on desktop.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
