Jump to content

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

Recommended Posts

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

Screen Shot 2022-12-13 at 1.05.52 PM.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Screen Shot 2022-12-13 at 1.05.52 PM.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.039c2bcc26f2500f6faf2529424c746f.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
24 minutes ago, Beyondspace said:

My testing

image.thumb.png.039c2bcc26f2500f6faf2529424c746f.png

@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.

Link to comment

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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.

Screen Shot 2022-12-13 at 7.24.15 PM.png

Screen Shot 2022-12-13 at 7.22.05 PM.png

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.