Add arrows to mobile lightbox on Gallery

Site URL: https://coconut-lobster-36me.squarespace.com/

Password: izette

Hi! I've found similar questions to this, regarding product lightboxes but struggling to work out the CSS for my site...

Is it possible to add arrows to mobile lightboxes?
(or at least not have the arrows disappear when the width is narrow?)

Here's how the arrows appear on desktop - which is OK:

But when it's viewed on mobile, they don't appear:

Please let me know if this is something custom CSS can help with!

Thanks in advance 🙂

Hi. Add to Design > Custom CSS

/* Show arrows on mobile */
@media screen and (max-width:575px) {
.gallery-lightbox-controls {
    display: flex !important;
}
.gallery-lightbox-control-btn .gallery-lightbox-control-btn-icon svg * {
    stroke: white;
}
}

Thanks @tuanphan! That's awesome.

I now understand this broadly means 'on mobile' (portrait) - good to know for future 🙂

@media screen and (max-width:575px)

But how do you find / know that the elements are called these specific things??

.gallery-lightbox-controls

.gallery-lightbox-control-btn

I have a real basic understanding of css, but these little bits of info unlock a whole load of customising options! It would be amazing if there's a list somewhere that has all the element names consistent across all Squarespace templates - if not, we should make one 😄  I'm sure it would be super valuable. 

11 hours ago, Alan123 said:

Thanks @tuanphan! That's awesome.

I now understand this broadly means 'on mobile' (portrait) - good to know for future 🙂

@media screen and (max-width:575px)

 

But how do you find / know that the elements are called these specific things??

.gallery-lightbox-controls

.gallery-lightbox-control-btn

I have a real basic understanding of css, but these little bits of info unlock a whole load of customising options! It would be amazing if there's a list somewhere that has all the element names consistent across all Squarespace templates - if not, we should make one 😄  I'm sure it would be super valuable. 

If you pay, I can make a list ☹️

There are a few lists like this, but usually not all, just a few common ids in the template. I wrote a list here (7.1) and here (Avenue template)  and Aviator id list

...

Thanks, OK good to know 🙂

Hi, this code worked for me but the arrows on mobile are off center on the images. I tried adding the code below and also with !important but no change so far. Can anyone help? Page to view on mobile is http://stonewall-construction-inc.squarespace.com/portfolio. Password is "jackson". Check the first gallery box to see what I mean. Thanks!

   align-items: center;
  justify-content: center

On 7/6/2021 at 1:58 AM, miskomedia said:

Hi, this code worked for me but the arrows on mobile are off center on the images. I tried adding the code below and also with !important but no change so far. Can anyone help? Page to view on mobile is http://stonewall-construction-inc.squarespace.com/portfolio. Password is "jackson". Check the first gallery box to see what I mean. Thanks!

   align-items: center;
  justify-content: center

Hi. Just tested the code & It is fine here. Can you explain in more detail, include screenshot? We can help easier

Hi I'm trying to figure this out too!

This how it looks on desktop

Which is great! But on mobile the arrows are on the bottom and you can only see them if you scroll down. You can't even tell it's a carousel on mobile... I tried asking friends about my site and they didn't even know you could slide through these! Please help meeeee my website is artbykarlamadrigal.com

27 minutes ago, artbykarlamadrigal said:

But on mobile the arrows are on the bottom and you can only see them if you scroll down.

This is what I'm seeing.

I checked this in Chrome mobile emulation and on my iPhone/Safari.

Can you tell us more about what browsing environment?