Search code examples
galleryslideshowsquarespace

How do I make gallery slideshow next/previous arrows larger in squarespace 7.1

They arrows are too small. I am using the Chase Nevins template. Is there a way to adjust them using custom css or code injection.

By inspecting I get the selector shown in image. I am not sure what to change. Is there a caret-right-icon--large? enter image description here

Solution

  • The following CSS, added via Custom CSS (also known as the CSS Editor) will allow you to adjust the size of those arrows.

    .gallery-slideshow-control-btn-icon svg {
  height: 50px !important;
  width: 28px !important;
}

    The way Squarespace has these setup and scaled, set the height to whatever size you want the arrows to be (in pixels, px) and then set the width to about 0.5625 of what the height is.

    So, in my example code above, I set the height to 50px and the width to 50 x 0.5625 = ~28.

    Use of !important should usually be avoided, but in this case it helps keep the selector more general, which is advantageous in the event that Squarespace changes the underlying classes of the svg element.