Arrow size not editable

[JoaoMarques95]

Hi, I putted the gallery inside a container of 400x200 pixels and the images fit properly, the problem is that now the arrows are too big and I can't find the way to edit them.

[bmcmahen]

Do you mean the arrow itself, or the round box that contains it? The box itself can be edited using css. You could also transform the size of the arrow using something like scale.

Alternatively, you could also disable the arrows and provide your own.

[JoaoMarques95]

Thank you! How can I change the round box?

First, I tried to change my arrow by changing the react-gesture-gallery/src/GestureGallery.tsx file here (in my node_modules folder):

Nothing happened. Then I created a new class in my main.css with the name of Gallery__NavigationArrow. Like this:

.Gallery__NavigationArrow{ width: "20px"; height: "20px" }

And also nothing happened... Do you have any idea?

P.S: transform: scale(0.1); also didn't work

[bmcmahen]

You need something like this:

.Gallery__NavigationArrow button {
  width: 20px !important;
}

I.e., you need to target the button itself, and you need to override they style attribute by using the !important flag.