7.0 Image title wrap in gallery view

Site URL: https://christinabalch.com/cm-gallery-image-text-example

Hi Circle - I'm trying to get the image title to wrap onto multiple lines instead of cutting off in the gallery grid layout. Ideally the image title will wrap and display on 2 or 3 lines depending on the browser width. I want this to be a universal update so all gallery grids function the same on the website. I don't mind if some of the rows are longer than others in the gallery grid.

This is something I will no doubt need to do again as this is a common layout for artist websites.

This site appears to have figured it out in the masonry layout, but I can't seem to locate the proper class(es) to get it to work on my sites. https://www.thecarolamoon.com/brand-photography-portfolio 

Example site below uses Avenue 7.0, but I will ultimately be implementing this change on a site using Brine in 7.0.

https://christinabalch.com/cm-gallery-image-text-example
password: test!

Please try this Custom CSS on that page:

/* code for fuller thumbnail titles */
.image-slide-title {
  white-space: normal;
}

You can replace the word normal with any of the following:

1. break-spaces
2. inherit
3. initial
4. pre-line
5. pre-wrap
6. revert
7. unset

hi - thanks for the suggestion! it was a huge help and i've made some progress.

with the following css, the title text overflow appears, but it's still not wrapping. any ideas? i could maybe use some good old-fashioned line breaks to solve this temporarily, but i'd love to find a responsive solution.

side inquiry for future projects: is this issue of long image titles resolved in 7.1 for collections? 

.image-slide-title {
  overflow: visible !important;
  white-space: pre-wrap;
}

@tuanphan your code works perfectly. thank you so much! i'm happy to pay you a bit for your expertise. let me know where i can send a tip! paypal? venmo? let me know!

On 1/16/2021 at 11:09 PM, tuanphan said:

We help here for free. If you want to donate, you can send more questions via my signature, and you can send later ☘️

I see blank item here. Do you want to fix?

I followed this thread to apply text wrapping to two column gallery display on mobile -- getting the same blank spaces between some images in the layout as pictured above -- would like a possible fix as well.
(seems to affect images in the third column) 🤷🏻‍♂️
thanks

example of my issue:  https://www.chuckgumpert.com/earthenworks