Jump to content

Carousel arrows reverting back to default color after adding custom CSS

Recommended Posts

Site URL: http://jenuman.com

Hey y'all, apologies if this problem has been solved before but I couldn't find the solution anywhere. I have been trying to add some customization to the directional arrows on the image carousel in the Wells template. My CSS code has worked for everything except the arrow color, which has the !important tag. On the custom CSS page everything seems to be in order but when I go to my page with the carousel and reload, the arrow color reverts back to default (white). It will flash the correct color and disappear. I'm not sure what the issue is so I'm coming to y'all for any help. My custom CSS is below and what I'd like it to look like is in the attached screenshot. Thanks so much in advance.

.sqs-gallery-controls .previous, {
  color: black !important;
  background-color: transparent !important;
  position: absolute !important;
  left: -5% !important;
  right: inherit !important;
}

.sqs-gallery-controls .next {
  color: black !important;
  background-color: transparent !important;
  position: absolute !important;
  left: inherit !important;
  right: -6% !important;
}

 

 

 

Screen Shot 2021-02-13 at 12.20.13 PM.png

Link to comment
  • Replies 2
  • Views 322
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.