Help Remove Random gaps in Grid Gallery on Mobile

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

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

10 hours ago, tuanphan said:

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

See attached for the gaps.

As I mentioned, the client wants two columns

On 1/21/2021 at 2:14 AM, F24M said:

See attached for the gaps.

As I mentioned, the client wants two columns

 

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;
}
}

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!