Cannot seem to figure this gallery image alignment issue on mobile

I created an image gallery for my site, with image titles appearing on each image. I entered the below code to make sure the full image caption is being shown on the page.

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title { white-space: normal !important; max-width: 100% !important; padding: 0 !important; font-size: 13px; }

However, now when I look at the site on mobile, the images do not align properly whenever the title goes over two lines instead of a single line.

Would appreciate any help!

Just searched on a similar problem. If each container in a row has a different height due to captions of different line lengths, image staggering was occurring. In the case of my client's site, most captions were one line but a few overflowed in to ellipses (which the client disliked). I set all captions to have enough height for two lines, allowed line-wrapping and adjusted the line height a bit. The extra white space is not noticeable in my instance, but in a gallery with captions of wildly differing line counts you might need another solution.

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
  height: 3.0em;
  line-height: 1.2em;
  white-space: normal;
}