Reposition gallery controls

Site URL: https://elkejochmann.squarespace.com

Hi there,

I'm using an image gallery from squarespace (slideshow: full). The gallery controls (in my case bullets) are displayed on the images and the image gets cropped on the bottom when I scale the browser window. Since the content of the images is important, I don't want it to be cropped.

Is it possible to position the controls under the image? So they don't disturb the content? Any ideas how I can make it, so the image does't get cropped?

I already use:

.gallery-fullscreen-slideshow {
object-fit: contain !important;
}

It helps, so that the top and the sides of the pictures don't get cropped. I just need it for the bottom, too.

That's the website: https://elkejochmann.squarespace.com 

Thanks in advance for helping!

FYI (should anyone have the same problem):

I've solved the problem by expanding the min viewport height of the section where the gallery is placed:

Quote

section[data-section-id="627d705257b5ff1a4b9e77a0"] {
  min-height: 130vh!important; }

To position the controls under the images I used: 

Quote

.gallery-fullscreen-slideshow-bullet-nav {
  position: relative !important;
  margin-top: 15%;
}

I'm semi happy. It works, but the spacing between the next section is very big, when viewed on mobile screens. I let it be like that for the start.