Jump to content

Reposition gallery controls

Recommended Posts

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!

Edited by justine___ha
Link to comment
  • justine___ha changed the title to Reposition gallery controls

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:


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

To position the controls under the images I used: 


.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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.