Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Add arrows to mobile lightbox on Gallery


Recommended Posts

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:

image.thumb.png.366df2237cb0c822de4b4681132306e7.png

 

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

image.thumb.png.55714f893a4ba099dd08569efdc1045a.png

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

 

Thanks in advance 🙂

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

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. 

Link to comment
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

...

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 2 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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