Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
mvandertol

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

Question

11 answers to this question

Recommended Posts

  • 11

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.

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 1

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?

Share this post


Link to post
  • 0

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..

Share this post


Link to post
  • 0

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..

Edited by Lostcoast
Initial Revision

Share this post


Link to post
  • 0

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>



Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...