Studio_Marius Posted June 9 Share Posted June 9 Hello, I've tried to code 3 line in a slideshow caption however the one where it's "View Project -> " is cutting, it's missing the bottom. I can't seems to figure out how to change that. Thanks a lot. My website is: www.mariusmarius.com PW: Merci Here is the code: ///// COLLECTION GALLERY /// body#collection-66346ab43ec2d25a614f33e7 { figcaption.gallery-caption.gallery-caption-fullscreen-slideshow { top: 80%; left: 0; text-align: left; max-width: 93%; color: white; } figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * { font-size: 30px; } .gallery-fullscreen-slideshow { margin-bottom: 0px !important; } /* mobile size */ @media screen and (max-width:767px) { figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * { font-size: 20px; }}} ///// /* Ensure white space preserves line breaks */ .gallery-caption-content { white-space: pre !important; } /* Style the first line of the caption */ .gallery-caption-content::first-line { font-size: 1.75rem; letter-spacing: 0!important; } /* Add a line break after the first line */ .gallery-caption-content::after { content: "\A"; /* Add a line break */ white-space: pre; /* Preserve line breaks */ } /* Style the second line of the caption */ .gallery-caption-content::after { font-size: 1rem; /* Font size for the second line */ content: "Second line"; /* Example content, replace with your own */ } /* Add a line break after the second line */ .gallery-caption-content::after { content: "\A"; /* Add a line break */ white-space: pre; /* Preserve line breaks */ } /* Style the third line of the caption */ .gallery-caption-content::after { font-size: 1rem; /* Font size for the third line */ content: "View Project → "; /* Example content, replace with your own */ display: block; /* Display the third line as a block element */ padding-bottom: 10px; /* Adjust the spacing between lines */ } Link to comment
Lesum Posted June 9 Share Posted June 9 @Studio_Marius Hi! Add this code under Custom CSS panel: body#collection-66346ab43ec2d25a614f33e7 figcaption.gallery-caption.gallery-caption-fullscreen-slideshow .gallery-caption-wrapper { padding-bottom: 25px !important; } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? 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