How do I change the font size used in the caption of image blocks?

How do I change the font size used in the caption of image blocks for Beatrice template? Do I need to inject the same code on each page I use the image block on?

If you want this to be applied site wide, then you should use the custom CSS section, and will only have to add the CSS once -- if you want to control image captions on a single page, then you can use per page code injections and style tags.

For a single, site wide adjustment, go to 'Change Style' (paintbrush) > 'CSS' (hit confirm) and copy / paste this:

.sqs-block.image-block .image-caption-wrapper p { font-size: 16px; }

And then 'Save' in the CSS window, and 'Save' again in the 'Style Editor' slide-out.

If you want to control it on a page-per-page basis, you would instead go to the page in question, then go 'Manage Site' (gear icon) > 'Page Settings' > 'Advanced' > and paste this into the 'Page Header Code Injection' section (be sure to include style tags):

<style>
  .sqs-block.image-block .image-caption-wrapper p { font-size: 16px; }
</style>

You would need to do this on any page you wanted the CSS applied.

Thanks for the detailed response, kale.

is there a way to place the text against a white rectangle block as the image description - similar to marquee template?

You can add !important , in case you don't see any change in the captions:

.sqs-block.image-block .image-caption-wrapper p{ font-size: 16px !important; }

works great. easy to understand. thx!

works great. easy to understand. thx!

I tried this and it only worked on the first image on my page. I'd like it to work on all images and I have multiples on the page. Anyone know the code for that?

I just applied this to my Aviator template - works great. Now how can I reduce the size of the padding between the images and the captions? The default is ridiculously wide..

I just applied this to my Aviator template - works great. Now how can I reduce the size of the padding between the images and the captions? The default is ridiculously wide..

I've been looking for a way to increase the font size on individual pages, for what seems like hours! Thanks to your code, @kale, I've been able to come up with a solution! By putting the code below into the CSS injection on an individual page, using the Five theme, I've been able to adjust the font size, for example, of text on my blog page. Thanks!

<style>
   .body p { font-size: 20px; }
</style>

Hi Kale... none of these work for me. Do you have any other tips? I'm using Mentor template. This is driving me nuts! :(

Hello, unfortunately none of this works. Is there a new line of code? Here in 7.0 with Pacific and it is very difficult to change the text size.

4 hours ago, caseyscalf said:

Hello, unfortunately none of this works. Is there a new line of code? Here in 7.0 with Pacific and it is very difficult to change the text size.

Can you share link to your site?