Changing font size for image lightbox titles and captions

In this tutorial, I’m going to show you how to adjust the size of the titles and captions that appear at the bottom of each image in the lightbox view.

Currently, this customization is only possible using CSS code. I recommend adding the CSS content block to the “Entire Site” section for site-wide changes, though you can also add it to the “All Galleries” section if preferred.

CSS Code

Once you’ve navigated to the appropriate section, add the following CSS code:

CSS
/*Changing font size for lightbox captions*/
.sm-lightbox-v2-photo-title .sm-button-label p {
    font-size: 24px;
}
 
/*Changing font size for lightbox titles*/    
.sm-lightbox-v2-photo-title .sm-button-label h2 {
    Font-size: 36px;
}

You can modify the appearance by changing the pixel values in the code separately for titles and captions based on your preferences.

Leave the first comment