Gallery Caption Overlay - Title Font Line Break / Max-Width (7.1)

Does anyone know how I could set a max width for the caption hover titles? Some of them are a bit longer and so there is some overflow (screenshot attached). I've included the caption overlay code being used below. I've tried to insert a few things, but none of them achieve breaking the longer titles into 2 lines.

This is the code that is currently styling the hover overlay & titles:

// PRESS (DESKTOP) - PRESS ARTICLE HOVER //
section[data-section-id="637554a5c0417c276a38ffea"] {
  .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(134, 128, 107,0.8) !important; /* overlay color */
  outline: 1px solid #F3F2EE;
  outline-offset: -10px;
  height: 100%;
  max-width: unset;
  padding: 0;
  opacity: 0;
  }}

.gallery-caption-wrapper {
  display: flex;
  align-items: center; /* center vertically */
  justify-content: center; /* center horizontally */
}

.gallery-caption-content {
  font-size: 48px !important; /* caption font size */
  color: #14161B; /*caption font color */
  line-height: 1em !important;
  }

.gallery-grid-item {
  position: relative;
  }

.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
  }

  .gallery-caption-grid-simple {
  transition-delay: 0ms;
  }


// Bring the Link Forward //
section[data-section-id="637554a5c0417c276a38ffea"] {
.gallery-grid-image-link:after {
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  }}


// PRESS - GALLERY CAPTIONS //

.gallery-caption p {white-space:pre}
.gallery-caption p {text-align:center}
.gallery-caption p:first-line {
  color: #F3F2EE;
  font-family: 'Trento+Typeface';
  font-size: 6px !important;
  letter-spacing: 0.35em;
  line-height: 8em;
}
.gallery-caption p {
  color: #F3F2EE;
  font-size: 15px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

https://kristen-rivoli-interior-design.squarespace.com/press

pw: Rivoli123

3 hours ago, skalison said:

Does anyone know how I could set a max width for the caption hover titles? Some of them are a bit longer and so there is some overflow (screenshot attached). I've included the caption overlay code being used below. I've tried to insert a few things, but none of them achieve breaking the longer titles into 2 lines.

This is the code that is currently styling the hover overlay & titles:

// PRESS (DESKTOP) - PRESS ARTICLE HOVER //
section[data-section-id="637554a5c0417c276a38ffea"] {
  .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(134, 128, 107,0.8) !important; /* overlay color */
  outline: 1px solid #F3F2EE;
  outline-offset: -10px;
  height: 100%;
  max-width: unset;
  padding: 0;
  opacity: 0;
  }}

.gallery-caption-wrapper {
  display: flex;
  align-items: center; /* center vertically */
  justify-content: center; /* center horizontally */
}

.gallery-caption-content {
  font-size: 48px !important; /* caption font size */
  color: #14161B; /*caption font color */
  line-height: 1em !important;
  }

.gallery-grid-item {
  position: relative;
  }

.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
  }

  .gallery-caption-grid-simple {
  transition-delay: 0ms;
  }


// Bring the Link Forward //
section[data-section-id="637554a5c0417c276a38ffea"] {
.gallery-grid-image-link:after {
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  }}


// PRESS - GALLERY CAPTIONS //

.gallery-caption p {white-space:pre}
.gallery-caption p {text-align:center}
.gallery-caption p:first-line {
  color: #F3F2EE;
  font-family: 'Trento+Typeface';
  font-size: 6px !important;
  letter-spacing: 0.35em;
  line-height: 8em;
}
.gallery-caption p {
  color: #F3F2EE;
  font-size: 15px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

 

https://kristen-rivoli-interior-design.squarespace.com/press

pw: Rivoli123

You can try adding to Home > Design > Custom Css

.gallery-caption .gallery-caption-content {
  max-width: 80%;
  white-space: normal;
}

Support me by pressing 👍  or marking as solution if this useful for you

My testing

24 minutes ago, Beyondspace said:

My testing

@BeyondspaceThanks for taking a look + sharing! It looks like that brings the title into two lines, but it's taking on the secondary font. I'm looking to have it all be the title font with the date in the smaller sans-serif. Maybe I need to find another way to break out the title & subtitle.

Do you mean keeping the title into one line? May be we should decrease the size of title so it does not extend to the next line

17 minutes ago, Beyondspace said:

Do you mean keeping the title into one line? May be we should decrease the size of title so it does not extend to the next line

@Beyondspace We like the contrast in font sizes as-is, but may need to decrease the title as a last resort. Ideally the longer titles would look something like the attached where the heading font may need to be split into two lines.