Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
hxt148

Cannot seem to figure this gallery image alignment issue on mobile

Question

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!

Edited by hxt148
Initial Revision

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

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

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...