css CSS to remove carousel arrows on desktop/tablet but keep on mobile

Site URL: https://www.gracemooreyoga.com/

I am trying to hide the arrows either side of the carousel (as shown on the attached image) but only on desktop and tablet devices, I want them to remain on mobile devices. Is there a CSS snippet that I can use to do this?

Link to the page: https://www.gracemooreyoga.com/

Many thanks in advance!

Grace

the arrows are different on desktop from mobile, so you can just add this to your CSS

div.desktop-arrows { display:none; }

you can put this in your Custom CSS if you want it to happen everywhere there's a carousel (probably a bad idea), or just wrap it in <style></style> and add it to a code block. You could also prefix the rule with the sections ID (use the Squarespace ID Finder Chrome extension for this is the easiest way)

On 8/25/2021 at 5:01 PM, iamdavehart said:

the arrows are different on desktop from mobile, so you can just add this to your CSS

div.desktop-arrows { display:none; }

you can put this in your Custom CSS if you want it to happen everywhere there's a carousel (probably a bad idea), or just wrap it in <style></style> and add it to a code block. You could also prefix the rule with the sections ID (use the Squarespace ID Finder Chrome extension for this is the easiest way)

Thank you!