Jump to content

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

Recommended Posts

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!

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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.