Gallery View on Mobile - Change to Single Stack - Single Page Only

Site URL: https://realiti.squarespace.com

password to site is: realiti

I hope someone can help - I am trying to force the News page to show single column images in the grid on mobile rather than the double ones. I have tried the following:

section[data-section-id=61656ea2e9ed7c51f77d7a03]
@media screen and (max-width:768px) {.gallery-grid-wrapper {grid-template-columns: repeat(1,1fr) !important; grid-row-gap: 3vw !important;}}

I have also tried with the #collection ID also to no avail.

The code works if I take out the section ID and it applies to the whole site, but I only want to apply to this one page?

Please can someone nudge me in the right direction? Thank you!

On 11/25/2021 at 10:12 PM, viccismarshall said:

Site URL: https://realiti.squarespace.com

password to site is: realiti

I hope someone can help - I am trying to force the News page to show single column images in the grid on mobile rather than the double ones. I have tried the following:

section[data-section-id=61656ea2e9ed7c51f77d7a03]
@media screen and (max-width:768px) {.gallery-grid-wrapper {grid-template-columns: repeat(1,1fr) !important; grid-row-gap: 3vw !important;}}

I have also tried with the #collection ID also to no avail.

The code works if I take out the section ID and it applies to the whole site, but I only want to apply to this one page?

Please can someone nudge me in the right direction? Thank you!

You can try

@media screen and (max-width: 767px) {
  section[data-section-id="6194c270cc162a602a8160b3"] .gallery-grid-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
    grid-row-gap: 3vw !important;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too