Split grid gallery into 3 columns on mobile, Squarespace 7.1 Fluid Engine

Hello,

I am trying to make the galleries on my client's website (link) display in 3 columns rather than the default 2 in mobile.

I have tried various CSS fixes but they are not working. Perhaps because of fluid engine? And maybe because I am already targeting each grid gallery with the following code to eliminate mysterious mobile padding?

@media screen and (max-width:1025px) {
.fe-63ef599164b9221a9814c895 {
    grid-template-rows: repeat(6,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}
}

the .fe section targets the grid that the gallery is laid out on... I presume I have to add something to the code above to adjust the columns in mobile view but I am not sure what that is...  Solutions such as the one below have no effect. Even when I tried it on a test gallery that was not altered with the code above...

@media only screen and (max-width: 640px) {
  .gallery-grid-wrapper {
    grid-template-columns: 3fr !important;
    grid-gap: 20px !important;
  }
}

Would be very grateful for any ideas! 

For this section?

On 6/3/2023 at 11:16 PM, tuanphan said:

For this section?

Hi Tuanphan,

I'm sorry I didn't get a notification that you replied to my question! 

It wasn't for that section though. It was only for the grid galleries in the artist portfolio pages. Here's an example page.

In the desktop version, I have 6 columns which splits automatically into 2 columns in mobile. But my clients would rather this is split into 3 columns in mobile and I can't seem to work this out.

Would be very grateful for your help!

@tuanphan Thank you so much for this! 🙌 It worked perfectly! 🙏 Now I just have to apply this to all the galleries... Many thanks for your help!