Jump to content

Help Centering Gallery Lightbox Arrows With CSS

Go to solution Solved by tuanphan,

Recommended Posts

  • ec25 changed the title to Help Centering Gallery Lightbox Arrows With CSS
14 hours ago, tuanphan said:

Hi,

You mean these arrows?

image.thumb.png.e591a9f72903676166da075c157f3070.png

It looks fine to me. Can you take a screenshot when you have problem? We can help easier

Hello,

Yes, for some reason mine looks like the right arrow is closer to the edge of the screen than the left.

 

Screen Shot 2023-08-21 at 2.06.13 PM.png

Link to comment
  • Solution
14 hours ago, ec25 said:

Hello,

Yes, for some reason mine looks like the right arrow is closer to the edge of the screen than the left.

 

Screen Shot 2023-08-21 at 2.06.13 PM.png

Try adding this to Website > Website Tools > Custom CSS

/* align lightbox arrows */
button.gallery-lightbox-control-btn[aria-label="Previous Slide"] {
    position: absolute !important;
    left: 5px !important;
    padding: 0 !important;
}

button.gallery-lightbox-control-btn[aria-label="Next Slide"] {
    position: absolute !important;
    right: 5px !important;
    padding: 0 !important;
}

 

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
8 hours ago, tuanphan said:

Try adding this to Website > Website Tools > Custom CSS

/* align lightbox arrows */
button.gallery-lightbox-control-btn[aria-label="Previous Slide"] {
    position: absolute !important;
    left: 5px !important;
    padding: 0 !important;
}

button.gallery-lightbox-control-btn[aria-label="Next Slide"] {
    position: absolute !important;
    right: 5px !important;
    padding: 0 !important;
}

 

Thank you so much! That's the one!

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.