Jump to content

Text Cut in 3 line Caption Slideshow

Recommended Posts

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 */
}

Screen Shot 2024-06-09 at 11.23.52 am.png

Link to comment
  • Replies 1
  • Views 854
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

@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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.