Jump to content

Help Remove Random gaps in Grid Gallery on Mobile

Go to solution Solved by tuanphan,

Recommended Posts

hey

I'm using the following code to have image titles wrap:

.image-slide-title {
  	white-space: normal !important;
  	line-height: 1.2em;
  }

but I then get random spacing gaps on mobile view.

Any ideas how to remove them while keeping the gallery in 2 columns (I know it can be fixed by making it 1 column but the client wants 2 columns)

 

Bonus question, if you know how to get the titles right under the image instead of having the gap, that would be great, but not key.

Thanks

Edited by F24M
Link to comment
  • F24M changed the title to Help Remove Random gaps in Grid Gallery on Mobile

Hi. Which gap? Can you take a screenshot? Also, I think mobile layout looks ugly ☠️

Edited by tuanphan
typo

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
  • Solution
On 1/21/2021 at 2:14 AM, F24M said:

See attached for the gaps.

As I mentioned, the client wants two columns

 

gaps.jpg

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1610492220506_3812 .sqs-gallery-block-grid .slide:nth-child(2n+1) {
    clear: left !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
On 1/23/2021 at 12:25 PM, tuanphan said:

Add to Design > Custom CSS


@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1610492220506_3812 .sqs-gallery-block-grid .slide:nth-child(2n+1) {
    clear: left !important;
}
}

 

Brilliant, thanks that seems to have done the trick!

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.