Jump to content

How to stop Grid Gallery block thumbnails from going over two lines on mobile (York)

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.sarahwalker.work/

Hi there folks!

I'm having trouble with the gallery block on my homepage. It contains three images, with the column number set to 3 in the gallery settings. On desktop, it displays fine, but on mobile, the grid pushes the third image onto a new line, which is making me frustrated.

I had a Google and tried the following code in the Custom CSS area, but to no avail - it keeps running over two lines, rather than forcing the grid to three on mobile.

@media screen and (max-width: 640px) {
  .sqs-gallery-block-grid .slide.sqs-gallery-design-grid-slide {
    width: calc(100%/1);
  }
}

This is all well above my wheelhouse - my coding knowledge extends to inserting images and making html links (what a boss). I'd greatly appreciate any thoughts anyone might have about how I can wrangle this!

Cheers from Melbourne, Australia,

Sarah

Link to comment
  • Solution

Add to Home > design > Custom CSS

@media screen and (max-width:960px) {
.homepage .sqs-gallery-block-grid .slide {
    width: 33.33% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.