Jump to content

two column mobile gallery only on specific gallery

Recommended Posts

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

 

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

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

 

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

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

 

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

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.