Jump to content

Editing gallery caption for spacing and different font sizes

Recommended Posts

I am trying to edit the captions in the gallery so that different words are different sizes in the same caption. For example, the captions currently read…  Item #       Item name     Sold…..  I would like the item name font to be a different size than the item # and the Sold text.  I would also like the spacing to be different so the item # is aligned left, the item name centered and the Sold  text aligned right.  I’m new to Squaresapce and my coding knowledge is super minimal so any help would be appreciated

Thanks

peter

 

The site url is:      ksarts.squarespace.com    pw:   Tim5774

Link to comment
  • Replies 3
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

You use this text

ekj247         Celebrate               Sold      

you can change it to

<p>ekj247</p> <p>Celebrate</p> <p>Sold</p>      

then add this code to Website > Website Tools (under Not Linked) > Custom CSS

.gallery-caption-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gallery-caption-wrapper p:nth-child(2) {
    color: #f1f;
    font-size: 30px;
}

.gallery-caption-wrapper p:nth-child(3) {
    color: green;
    font-size: 20px;
}

.gallery-caption-wrapper p:nth-child(4) {
    color: #000;
    font-size: 40px;
}

image.thumb.png.7d642fb1c30c8a7244fc957fde0fd304.png

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 11/21/2023 at 11:46 PM, peterksa said:

Thank you.  I understand what you are doing but my question is...   why start with p:ninth-child(2)?  Why not start with   p:ninth-child(1)?   

Thanks

Because there is a p blank tag first, I don't know why it appears there.

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.