two column mobile gallery only on specific gallery

Site URL: https://bastihansen.com/home

Hey Guys!

I figured out how to get only one row to show up on a mobile gallery (instead of two) via:

// 1 Image Per Row On Mobile - 7.1 Version //

@media only screen and (max-width: 640px) {
  .sqs-layout .sqs-gallery-design-grid-slide {
    width: 100% !important;
  }
}

However, now i have a client wall that i solved through a gallery as well. I made custom square client icons. they look great on desktop but look way to big on mobile (due to the one row css).

I would love to see 3 or 4 rows on mobile for that specific gallery.
Maybe there's a way to address that specific gallery throigh an ID and tell it what to do when a specific width threshold is met?

I am completely new to CSS etc.
Just guessing here.

Any ideas?
Thanks! 🙂

P.S. my complete custom css looks like this right now in case it's relevant:

// 1 Image Per Row On Mobile - 7.1 Version //

@media only screen and (max-width: 640px) {
  .sqs-layout .sqs-gallery-design-grid-slide {
    width: 100% !important;
  }
}


//Transparent Header
.header {
  background: transparent!important;
}


//Shrink Your Logo
#header .header-title-logo img {
  transition: max-height 800ms ease-in-out
}
#header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .header-title-logo img {
    max-height: 80px;
  }
}


//Make Mobile Gallery One Column
@media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) {

  .gallery-grid-wrapper {
  
    grid-template-columns : 1fr !important;
    
    }
  }

//Disable Mobile Lightbox
@media only screen and (max-width: 600px) {
.gallery-grid-lightbox-link {
  pointer-events: none;
}
}

You mean Selected Clients on /home page?

Yeah exactly 🙂
Right now it shows up as one column in mobile which makes it way too long to scroll through all of them. So i'd rather have them show up as 3 or 4 in a row (only on mobile) for that specific gallery.

On 1/23/2022 at 2:43 AM, be-one said:

Yeah exactly 🙂
Right now it shows up as one column in mobile which makes it way too long to scroll through all of them. So i'd rather have them show up as 3 or 4 in a row (only on mobile) for that specific gallery.

 

Add to Design > Custom CSS

/* Selected clients mobile */
@media screen and (max-width:767px) {
[data-section-id="61e9353517d9f1151a9ea5ad"] .gallery-grid-wrapper {
    grid-template-columns: repeat(4,1fr) !important;
}
[data-section-id="61e93e6a18865522acb94f8e"] {
    min-height: unset !important;
}
}

Thanks for this. Unfortunately it still shows the client gallery as 1 column in mobile. Nothing seems to have changed.

Ah wait. In Firefox Mobile it doesn't work. in Safari it actually does show up right and it's beautiful! Thanks so much!

Try this new code

/* Selected clients mobile */
@media screen and (max-width:767px) {
[data-section-id="61e9353517d9f1151a9ea5ad"] .gallery-grid-wrapper {
    -ms-grid-columns: (1fr)[4] !important;
    grid-template-columns: repeat(4,1fr) !important;
}
[data-section-id="61e93e6a18865522acb94f8e"] {
    min-height: unset !important;
}
}