Editing gallery caption for spacing and different font sizes

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

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

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

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.