Lightbox Caption styling?

I'm working on a client site. I found code to display captions in the lightbox instead of in the gallery grid. My client wants the caption to be styled more. Is there a way to style the caption text? I tried CSS and tried to add line breaks, but it isn't working for me. I want the title to be bolded and on the top line, then the other info below. I attached a screenshot of an image in the lightbox. My client's site is still set to private. I've tried various CSS I've found online but it isn't working for the lightbox caption. Thanks for any tips!

I set up a SquareSpace trial site to test this.
password: gallerytest
URL: https://rectangle-poodle-8dp4.squarespace.com/gallery-1

Here's the code to get the gallery captions styled, it works until I have caption for lightbox only:

.gallery-caption p {white-space:pre; text-align:center !important}

.gallery-caption p:first-line {color: black; font-weight:bold !important}

Then I found and added this to get the captions to show in lightbox only (client request):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){
        var text = $(this).find('img').attr("alt");
        console.log(text);
        $(this).append('<div class="lightbox-caption">' + text + '</div>');
    })
})
</script>
<style>
.lightbox-caption {
    color: gray;
    font-weight: bold;
    margin: 15px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -65px;
    z-index: 9999;
}

  .lightbox-caption p {
    white-space:pre;
    font-weight: normal!important;
    text-align:center!important;
  }
  
.gallery-lightbox-wrapper:hover {
    cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .lightbox-caption {
    display: none!important;
}
.gallery-lightbox-item[data-active='true']:hover .lightbox-caption{
    display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{
    display: inline-block;
}
  .gallery-lightbox .lightbox-caption {
    display: block !important;
}
  .gallery-caption p.gallery-caption-content {
    display: none !important;
}
</style>

In the gallery, the caption has a soft return after the title

Hi,

What is site url? We can help easier

oops! Thanks. Here it is:

password: gallerytest
URL: https://rectangle-poodle-8dp4.squarespace.com/gallery-1

2 hours ago, LA-Design said:

 

 

password: gallerytest
URL: https://rectangle-poodle-8dp4.squarespace.com/gallery-1

Try edit title, use this format

<strong>Title</strong><br/>
Size, Medium

Thanks, I tried it but it doesn't work for the lightbox captions.

On 3/15/2023 at 11:02 PM, LA-Design said:

Thanks, I tried it but it doesn't work for the lightbox captions.

You can keep it & remove this code, we will test new code to convert this into caption without lost style

Thanks, I removed that code from the 'code injection' area. Should I also removed this from the 'Custom CSS' area?

.gallery-caption p {white-space:pre; text-align:center !important}

.gallery-caption p:first-line {color: black; font-weight:bold !important}

Thank you!

I took that CSS out just in case that's better. Thanks!

checking in, I don't think I resolved this. It's not working, all his captions are on one line. Is it possible to have line breaks in a lightbox caption?

Hi again, I noticed that these captions (in lightbox mode) get cut off when viewing on a phone. 

https://www.janiceweingrod.com/moments-in-time

https://www.lannyweingrod.com/fictional-characters

Any way to fix this? Thanks!

On 9/26/2023 at 8:39 AM, LorenAK said:

Hi again, I noticed that these captions (in lightbox mode) get cut off when viewing on a phone. 

https://www.janiceweingrod.com/moments-in-time

https://www.lannyweingrod.com/fictional-characters

Any way to fix this? Thanks!

First, to make break line, you can use this br tag in caption

caption <br/>
caption line 2

Next, to add caption in lightbox, use this new code

Great, thank you for this, I added the new code to the footer code injection.
I deleted the old lightbox code from the header area of the code injection.
Now no captions are showing. Should I have left the old code there?

https://www.janiceweingrod.com/moments-in-time

On 9/28/2023 at 9:31 AM, LorenAK said:

Great, thank you for this, I added the new code to the footer code injection.
I deleted the old lightbox code from the header area of the code injection.
Now no captions are showing. Should I have left the old code there?

https://www.janiceweingrod.com/moments-in-time

I see it shows fine here