Jump to content

Style 7.1 Gallery Captions

Go to solution Solved by tuanphan,

Recommended Posts

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 comment

@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 comment
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 comment
  • 2 weeks later...
  • 5 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 comment

@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 comment
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%);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.