Reducing post title font size in child theme

Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

Hi cbaz,

You can put this at the bottom of your theme’s style.css; or if you have WordPress’s official Jetpack plugin, you can go to Appearance –> Edit CSS and put it there.

.entry-title { font-size: 26px; }

Hope this helps,
Nhat

Hi esmi and Nhat,

Thanks for your responses. I will try downloading the Internet Explorer web developer tool and see if that helps.

And, Nhat–do I just paste that at the very bottom of the style.css? I’m just afraid of making changes that will somehow screw up my site! (I’ve done this before. . .)

And, Nhat–do I just paste that at the very bottom of the style.css? I’m just afraid of making changes that will somehow screw up my site! (I’ve done this before. . .)

Yes, just paste that line at the bottom of your [moderated] or child-theme’s style.css. Or if you want to make it easier, install WordPress’s official Jetpack plugin and activate the Custom CSS module; it’ll allow you to add custom CSS via Appearance –> Edit CSS.

Adding CSS lines will never break your site to the point that it’s inaccessible. If something goes wrong, simply delete the line.

You only have to worry about messing up when you mess with PHP.

—-

Edit: In case you don’t know, you can change the font size number to whatever you want by changing that number.

Ok, thank you! I’ll try that.

Ok, I have Jetpack Custom CSS. I added .entry-title { font-size: 26px; }, but when I clicked preview, nothing was changed. Am I missing something?

I still need help changing the font. The developer tool wouldn’t work and the CSS code from above didn’t seem to change anything. Anyone???

The font size is controlled by the h1 tag so update the line you added to your css to this:

.entry-title h1 {
    font-size: [YOUR NUMBER]px;
}

Thank you. I tried that as well, and still nothing! Here is my stylesheet–where do I insert it?

1.Theme URI: https://example.com/twenty-thirteen-child/

2. Description: Twenty Thirteen akChild Theme

3. Author: Aimee Kade

4. Author URI: https://example.com

5. Template: twentythirteen

6. Version: 1.0.0

7.*/

8.

9./* =Imports styles from the parent theme

10.————————————————————– */

11.@import url(‘../twentythirteen/style.css’);

12.

13.

14./* =Theme customization starts here

15.————————————————————– */

16..akfull-page {

17. margin-left: auto !important;

18. margin-right: auto !important;

19. height: auto;

20. padding-right: 1em !important;

21.}

https://pastebin.com/atwHSfyh

sorry, can’t seem to remember how to paste a pastebin link–argh!

The reason it didn’t work before is because you had .entry-title { font-size :18 px; }. It should have been .entry-title { font-size: 18px; } Note that there’s no space between “18” and “px”.

@stephencottontail is right, sorry I missed that. And to answer your other question, anywhere after line 11 will work fine, but for semantics, line 22 would be better.

I hate to say this, but it still didn’t work! (no space between 18 & px)

Checking your CSS with Chrome developer tools, I can see all your CSS and it still shows that you have a space remaining in your CSS element. Your css is showing:

.entry-title {
font-size: 18 px;
}

And that it has been inserted using dev7-custom-css via jQuery, which I think is the Jetpack plugin. Since that is the only line of CSS added from this, and you said you changed the CSS through Jetpack, I surmise this is the case. It is very important that there is no erroneous spaces. In fact you can copy and paste this line to be sure:

.entry-title { font-size: 18px; }

To change the size, change the number – do not add any spaces. Copy that in and save it. That should reduce your heading size.