How to make Gallery Grid 2 Columns on Mobile [Paloma Template]

Hi all,

I'm using the Paloma template for my website gohoopday.com. If you scroll down to the sixth fold, you'll see tons of logos. On mobile, these stack (1 per row), which isn't very mobile-friendly. I am trying to get 2 or 3 per row for mobile.

On a previous site with a different template, I used a formula similar to the ones listed in the link below, but on this template it's not registering.

• https://forum.squarespace.com/topic/64554-create-more-than-2-columns-in-mobile-for-grid-gallery/

I've tinkered around and tried this, but it only pushes the logos to the left rather than creating 2 columns.

@media only screen and (max-width: 640px) {
.gallery-grid-item { 
   width: 50% !important;
  }
}

I am wondering if it is because this is a gallery page vs an image gallery.

Anyways, I cannot figure it out - please let me know if you can help!

Max

Did you find a solution to this? I am having the same problem.

Squarespace needs to add the option to define 2 columns on grids instead of default stacking.

I'm running into same issue, the CSS is not working for me either.

Difficult to help without sharing url.

Can you share link to gallery on your site?

I am trying to solve this on https://artemis-college.squarespace.com (password: beetroot). Near the bottom of the homepage is a gallery of partner logos, that I would like in a 2 or 3 wide grid on mobile.

Hey Folks!  In 7.1 galleries are set up differently than they used to be in 7.
Long story short, it is no longer a width % or px issue, it's actually a setting that says how many are being displayed in a row.

The snippet below will specify the # of columns displayed - 2 in this example. And to apply this only to a gallery in one specific page section, you can use that section id first.

So... this code to target all grids galleries:

@media only screen and (max-width: 640px) { 
.gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}]

Or this version for just the one section:

@media only screen and (max-width: 640px) {
[data-section-id="123456789"] .gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}}

One SUPER important thing I want to mention - i am sure you all noticed that we get a mobile preview and a desktop preview... and thats it! It turns out that 7.1 was designed with one main break point at 991; so double check when your galleries are moving down to one and adjust that 640 accordingly ♥ #protip

Anywho, hope that helps! Let me know how it goes 🙂

grid-column-gap: 5px;

grid-row-gap: 5px;

1 hour ago, tuanphan said:

grid-column-gap: 5px;

grid-row-gap: 5px;

Thanks Tuanphan!

I've inputted this incorrectly as it's not changing - could you advise on this?

@media only screen and (max-width: 640px) { 
.gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;
grid-column-gap: 5px;
grid-row-gap: 5px; }
}

Thanks.

On 5/19/2020 at 12:01 AM, LXK said:

Thanks Tuanphan!

I've inputted this incorrectly as it's not changing - could you advise on this?

@media only screen and (max-width: 640px) { 
.gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;
grid-column-gap: 5px;
grid-row-gap: 5px; }
}

Thanks.

Did you solve? I can't see gallery

On 5/20/2020 at 12:30 PM, tuanphan said:

Did you solve? I can't see gallery

Hi Tuanphan, 

I didn't solve this.

Did I add your code into the right place within my original code?

@media only screen and (max-width: 640px) { 
.gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;
grid-column-gap: 5px;
grid-row-gap: 5px; }
}

Thank again for your help.

On 5/22/2020 at 10:16 PM, LXK said:

Hi Tuanphan, 

I didn't solve this.

Did I add your code into the right place within my original code?

@media only screen and (max-width: 640px) { 
.gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;
grid-column-gap: 5px;
grid-row-gap: 5px; }
}

Thank again for your help.

It seems you solved?

Can you share link to gallery page? I don't see

9 minutes ago, LXK said:

Sure, thanks for your help with this.
https://www.cbhousedoctor.com/the-getaway-collection/biscaia-ocean-villa
PW: New-Dev!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
figure.gallery-grid-item {
    padding-bottom: 0;
}
}

2 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
figure.gallery-grid-item {
    padding-bottom: 0;
}
}

 

It's solved! 

I really appreciate your help on this, have a great day!

Guys please give me more details, where should inject this code exactly, and should modify it to fit my products list and my galleries ? 

please help

On 5/26/2020 at 6:14 PM, haidar said:

Guys please give me more details, where should inject this code exactly, and should modify it to fit my products list and my galleries ? 

please help

Add to Home > Design > Custom CSS

Can you share link to product list page & gallery page?

Hey there, I'm in a pickle and I need to action the following. Mt client wants their products to display 2 across on mobile shop page, not the stack. Is this possible? Thanks in advance!

Hey there, I'm in a pickle and I need to action the following. Mt client wants their products to display 2 across on mobile shop page, not the stack. Is this possible? Thanks in advance!

On 6/5/2020 at 6:44 AM, alexandmattcreative said:

Hey there, I'm in a pickle and I need to action the following. Mt client wants their products to display 2 across on mobile shop page, not the stack. Is this possible? Thanks in advance!

Can you share link to shop page? We can check easier

Today, I noticed that Masonry and Simple Grid gallery sections default to two columns on mobile. However, the Grid: strips is one column on mobile. Has anyone managed two or three columns on mobile for the Grid: strips? @inside_the_square or @tuanphan you folks seemed to have worked with the CSS a bit. I've been targeting the .gallery-strips-item wrapper and .gallery-strips-item but haven't been able to get it to work and would appreciate other eyes.

@JasonGipson do you have a link to your site? I can take a look.

Client site still in progress. 

@JasonGipson

/* Add this code to Design -> Custom CSS */
 

@media(max-width:767px) {
.gallery-strips-item {
    width: 100% !important;
    position: unset !important;
    transform: unset !important; 
}

.gallery-strips-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    height: unset !important;
}

}

Result:

@RyanDejaegher  Thanks! I'd missed the transform unset and apparently had transposed the "m"&"n" in columns. 🤦🏻‍♂️. 

Works great except the height is not scaling down. 

@JasonGipson you can add this to adjust the height

 

.gallery-strips-item img {
    object-fit: contain !important;
    height: 100% !important;
}