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

Style 7.1 Gallery Captions


kindandbrave
Go to solution Solved by tuanphan,

Question

  • Answers 25
  • 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; }  

Posted Images

25 answers to this question

Recommended Posts

  • 1

if the font exist, this code should work

p.gallery-caption-content {
    font-family: LTC-Bodoni-175 !important;
}

 

Link to post
  • 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;
}

 

Link to post
  • 0

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

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
  • 0
On 11/28/2020 at 9:06 AM, WengKien-IC said:

May I know where should I enter the codes? I need this too. Thank you. 

 

Design > Custom CSS

Link to post
  • 0

@tuanphan thanks, now the text is clickable 🙂


See screenshot for the text always not being in the center (see the bottom 2 landscape photos)

1666687481_ScreenShot2020-12-10at8_01_11pm.thumb.png.3b74398fe111ce3d05b9b896dbbea1e1.png

 

Currently using this code  - can you help me check if there's anything wrong?

@media screen and (min-width: 640px) { h4 { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; position: relative; right: 10px; } 
}
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;
}

figcaption {
    pointer-events: none;
}

Link to post
  • 0
On 12/10/2020 at 4:03 PM, jonongec said:

@tuanphan thanks, now the text is clickable 🙂


See screenshot for the text always not being in the center (see the bottom 2 landscape photos)

1666687481_ScreenShot2020-12-10at8_01_11pm.thumb.png.3b74398fe111ce3d05b9b896dbbea1e1.png

 

Currently using this code  - can you help me check if there's anything wrong?

@media screen and (min-width: 640px) { h4 { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; position: relative; right: 10px; } 
}
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;
}

figcaption {
    pointer-events: none;
}

Add this CSS

figcaption.gallery-caption.gallery-caption-grid-strips {
    left: 50% !important;
    transform: translate(-50%);
}

 

Link to post
  • 0

Hi @tuanphan - I am also having issues with getting my descriptions on gallery centered - could you help please?

https://grouse-chartreuse-cjcr.squarespace.com/#contact#contact

It's the first orange section with the icons - you'll see that the captions are on the left. I have managed to change the font and size but I cannot get these centered. 

Any help would be massively appreciated! 

Thanks!

 

Link to post
  • 0
On 12/13/2020 at 11:45 PM, tuesdayroo said:

Hi @tuanphan - I am also having issues with getting my descriptions on gallery centered - could you help please?

https://grouse-chartreuse-cjcr.squarespace.com/#contact#contact

It's the first orange section with the icons - you'll see that the captions are on the left. I have managed to change the font and size but I cannot get these centered. 

Any help would be massively appreciated! 

Thanks!

 

Hi. Your site is private. Can you setup password & share url?

Link to post
  • 0
On 12/16/2020 at 9:36 PM, tuesdayroo said:

Hi @tuanphan - thanks 🙂

 

https://grouse-chartreuse-cjcr.squarespace.com/config/settings/site-visibility

Password is: Assemble

 

Thanks

 

Assemble

Incorrect password

Link to post
  • 0
On 12/17/2020 at 10:54 PM, tuesdayroo said:

Hi @tuanphan - sorry try the below:

password: hello

Thank you - appreciate your help!

It looks like you solved?
Also, I see footer logo looks huge on mobile. You can add this to Custom CSS to resize it.

/* resize footer logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1608237464377_37519 {
    width: 50%;
    margin: 0 auto;
}
}

 

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