Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 4

Style 7.1 Gallery Captions


Go to solution Solved by tuanphan,

Question

  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Site URL: https://www.bethlehemsynagogue.org/photos-archived Hi there everyone! Who's excited!? Squarespace made it possible to display captions on gallery pages! Woohoo! Wondering if anyone kn

Which position? Can you describe in detail. This code will move text over images (overlay) figcaption.gallery-caption.gallery-caption-grid-masonry { position: absolute; bottom: 0;

if the font exist, this code should work p.gallery-caption-content { font-family: LTC-Bodoni-175 !important; }  

15 answers to this question

Recommended Posts

  • 0

Which position? Can you describe in detail.

This code will move text over images (overlay)

figcaption.gallery-caption.gallery-caption-grid-masonry {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    color: white;
    left: 0;
    text-align: center;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
Posted (edited)

I think she wants to center the captions  in relation to each image inside the gallery. At least this is what I've been wanting to do for a couple of days.
Using tuanphan code, I managed to increase the caption's size and its weight, but I still can't centralize it. Text-align: center did not work for me.

figcaption.gallery-caption.gallery-caption-grid-simple {
p {
  font-size: 110%;
  font-weight: 500;
  }
}

 

 

Edited by jhmarsolla
Link to post
  • 0

@tuanphan @jhmarsolla Thanks for your help, y'all.

I'm personally trying to center it, which I was able to do with your help. But the biggest thing I'm trying to do is switch the font family to the following. When I add it into your code, nothing happens. Would it need a separate callout?

      font-family: ltc-bodoni-175 !important;

font-family: ltc-bodoni-175;
font-weight: 500;
font-style: normal;
letter-spacing: 0em;
text-transform: none;

 

Link to post
  • 0
1 hour ago, kindandbrave said:

@tuanphan @jhmarsolla Thanks for your help, y'all.

I'm personally trying to center it, which I was able to do with your help. But the biggest thing I'm trying to do is switch the font family to the following. When I add it into your code, nothing happens. Would it need a separate callout?

      font-family: ltc-bodoni-175 !important;


font-family: ltc-bodoni-175;
font-weight: 500;
font-style: normal;
letter-spacing: 0em;
text-transform: none;

 

Can you share how you managed to center the captions? I haven't been able to do that yet.

Link to post
  • 0
On 11/16/2020 at 4:44 PM, jonongec said:

@tuanphan

how do you make the text in the center of the image?

currently it's at the bottom of the image and I would like it totally centered (up and down, left and right)

Can you share link to page where you use gallery? We can check easier

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

https://www.jonathanong.com/

Currently I'm using this code

 

}
figcaption.gallery-caption.gallery-caption-grid-strips {
    position: absolute;
    top: 42%; 
    left: 50%;
    bottom: 0;
    background: rgba(0,0,0,0.0);
    color: white;
    left: 0;
    text-align: center;
}
p.gallery-caption-content {
  font-size: 120% !important;
}

 

I'm finding the captions sometimes centered, sometimes not.

Also top : 42% seems more centered than 50% for some reason.

Basically I just want the caption in the absolute center of the image.

 

And also if you have code for making the whole image and caption to be able to be clicked through. Currently you can't click on the caption but can click on the rest of the photo.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...