Change image caption text size

Please let me know, exactly which text’s size you want to reduce?

Kind regards

I want to change all caption text to size 10 and in italics if possible.

Hello,

These are some CSS selectors in your page:

/* Title text */
.uagb-block-0ca54584 .uagb-post__text .uagb-post__title a {
	font-style: italic;
	font-size: medium;
}

/* Taxonomy label icon */
.uagb-post-grid .uagb-post__author span, .uagb-post-grid .uagb-post__comment span, .uagb-post-grid .uagb-post__taxonomy span, .uagb-post-grid .uagb-post__date span {
	font-style: italic;
	font-size: medium;
}

/* Taxonomy text */
.uagb-post-grid .uagb-post__text .uagb-post-grid-byline>* {
	font-style: italic;
	font-size: medium;
}

/* Excerpt text */
.uagb-block-0ca54584 .uagb-post__text .uagb-post__excerpt {
	font-style: italic;
	font-size: medium;
}

/* Read more button text */
.uagb-block-0ca54584 .uagb-post__text .uagb-post__cta a {
	font-style: italic;
	font-size: medium;
}

The font-size attribute can be set to many units (px em rem so on…) and words (small medium large larger so on…). Ex:

font-size: medium;
font-size: large;
font-size: 30px;
font-size: 1em;

I hope this can be of use.

Best regards from QVcreative.

Hi, I’m not so sure what to do with this information. Would you mind elaborating? Thanks

Maybe we can try a different approach, like a visual one.

The best practice would be to build child theme and then edit it’s style in a CSS way, to make it easier we can download these two plugins Child Theme Generator and Visual CSS Style Editor.

Use the first one to create and activate a child theme using as a parent your current theme (If you already have a child theme continue to the second plugin); all the options can be left as default.

With the second one, there will be a new option at the admin page site view named “Edit With YellowPencil”, it’s an easy way to change the font size and set it to italics with a live preview, the plugin is very visual and easy to use.

If you need more assistance I could explain all with more details; I hope this can be of use.

Best regards from QVcreative.

• This reply was modified 4 years, 4 months ago by peterv74.

Hi, thanks for your help so far. This second method actually seems a bit more complicated for me.

I was just wondering if you could help me find the right CSS selector to edit all my caption text? I should be able to use the following, except I don’t think .wp-caption-text is the right selector to use:

.wp-caption-text {
font-size: 10px;
}

• This reply was modified 4 years, 4 months ago by elilyjayy.

There are many selectors, one per text element of the image section, let’s look at your example:

.wp-caption-text {
    font-size: 10px;
}

The selector is .wp-caption-text as in the Title text selector in your page .uagb-block-0ca54584 .uagb-post__text .uagb-post__title a
the code left is the area where you can change the selected element propierties like

{
    font-size: 10px; /* to set the font size to 10px */
}

where I propose to use:

{
    font-size: 10px;
    font-style: italic; /* to set the font style as italic */
}

The code to make the Title text change should be:

.uagb-block-0ca54584 .uagb-post__text .uagb-post__title a {
    font-size: 10px;
    font-style: italic;
}

In the same context:
the Taxonomy label icon selector (this is the label image at the left side of the taxonomy text) and code could be:

.uagb-post-grid .uagb-post__author span, .uagb-post-grid .uagb-post__comment span, .uagb-post-grid .uagb-post__taxonomy span, .uagb-post-grid .uagb-post__date span {
	font-size: 10px;
}

and so on:

/* Taxonomy text */
.uagb-post-grid .uagb-post__text .uagb-post-grid-byline>* {
	font-style: italic;
	font-size: 10px;
}

/* Excerpt text */
.uagb-block-0ca54584 .uagb-post__text .uagb-post__excerpt {
	font-style: italic;
	font-size: 10px;
}

/* Read more button text */
.uagb-block-0ca54584 .uagb-post__text .uagb-post__cta a {
	font-style: italic;
	font-size: 10px;
}

You could try all these codes at your theme customization area to see the live changes before publishing.
Search at the admin area of the WordPress dashboard menu for ‘Appearance’ ‘Customize’ then select ‘Additional CSS’, scroll down at the menu area then add the codes one by one looking at the caption text area.
You will notice the changes at once, so try increasing or decreasing the font size as you desire then click at the publish button.

I hope this helps.

Best regards.

• This reply was modified 4 years, 4 months ago by peterv74.

Hi, thank you so much for your reply,

Unfortunately, none of the CSS selectors mentioned worked to change the caption text size.

I finally managed to find the right CSS selector on my own, however: .wp-block-image figcaption; which now using the below, I’m able to change my caption font size!

.wp-block-image figcaption {
	font-size: 10px;
}

Thanks for all your help though!

• This reply was modified 4 years, 4 months ago by elilyjayy.

I’m glad to see you solved it.
You are welcome.

Best regards from QVcreative.