Jump to content

Move Slideshow Navigation Controls - Stop overlapping with images

Recommended Posts

Hello,
I'm looking for help moving the navigation arrows of a slideshow in a gallery block. I've attached two screenshots to illustrate the issue. When the image is narrow enough, the arrows are clear of the image, and are positioned with a good distance from it. 

When the image reaches a certain width, the arrows cover up the artwork.

We are not particular on what solution resolves this. I am open to either: a) moving the arrows above or below the slideshow completely, b) adding enough padding or margin around the slideshow to force the arrows to clear it, c) adding padding or margin around the arrows to force them to never overlap the images

Whatever is the easiest solution to achieve having the arrows never overlap the artwork, we'll happily accept!

Thank you so much for any thoughts you could offer.

Screen Shot 2023-09-14 at 9.29.49 PM.png

Screen Shot 2023-09-14 at 9.30.00 PM.png

Link to comment
  • Replies 4
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Hello @tuanphan

The page is here: https://parrot-elk-awab.squarespace.com/squarehelp

I have tried this solution:


.gallery-slideshow-controls {
  position: absolute;
  margin-top: -330px;
  justify-content: center; 
}

It works, but I don't trust margin to translate onto all device sizes. For example, if the image gets bigger, 330px will still land in the middle of the picture. 

But let me know what you would recommend instead. Also, if it's easier for you to find a solution from scratch, I can remove my custom code.

Thank you so much for anything you suggest to help.

Best, Van

Link to comment
On 9/19/2023 at 2:35 AM, Van_h said:

Hello @tuanphan

The page is here: https://parrot-elk-awab.squarespace.com/squarehelp

I have tried this solution:


.gallery-slideshow-controls {
  position: absolute;
  margin-top: -330px;
  justify-content: center; 
}

It works, but I don't trust margin to translate onto all device sizes. For example, if the image gets bigger, 330px will still land in the middle of the picture. 

But let me know what you would recommend instead. Also, if it's easier for you to find a solution from scratch, I can remove my custom code.

Thank you so much for anything you suggest to help.

Best, Van

What is password?

image.png.25fe546ff69c9afaea5731629f438f07.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

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.