christinabalch Posted January 5, 2021 Share Posted January 5, 2021 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! drudesign 1 Link to comment
tazmeah Posted January 6, 2021 Share Posted January 6, 2021 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: break-spaces inherit initial pre-line pre-wrap revert unset drudesign and tuanphan 2 Link to comment
christinabalch Posted January 7, 2021 Author Share Posted January 7, 2021 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; } Link to comment
Solution tuanphan Posted January 10, 2021 Solution Share Posted January 10, 2021 On 1/8/2021 at 2:32 AM, christinabalch said: 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; } Add to Design > Custom CSS div.image-slide-title { white-space: initial !important; } drudesign and christinabalch 2 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
christinabalch Posted January 13, 2021 Author Share Posted January 13, 2021 @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! Link to comment
ChuckG-Art Posted May 10, 2022 Share Posted May 10, 2022 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 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment