# Changing font size/style for Titles on Posts but not Pages

**URL:** <https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410>\
**Category:** Illdy\
**Created:** [October 5, 2017, 10:34pm UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410 "2017-10-05T22:34:00Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![vdeluca](https://colorlibsupport.com/user_avatar/colorlibsupport.com/vdeluca/32/804_2.png) [@vdeluca](https://colorlibsupport.com/u/vdeluca)\
**Post date:** [October 5, 2017, 10:34pm UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/1 "2017-10-05T22:34:00Z")

</div>

Hi there- I’d like to change the size of the font for blog post titles that appear in the header on the feature image because they’re usually long, however I want to keep the size as is for page titles.

Here are two links for example:

On this page, I like the size for the page title, “Services”:

> **[Services - CIFT Counseling](https://ciftcounseling.com/services/)**
>
> Counseling Due to our team’s diverse educational backgrounds in marriage & family therapy, clinical psychology, counseling and social work, we can help you tackle just about anything life throws at you. Learn More \>\> Testing Life is complex...

On this page, it’s giant for such a long title:

> **[Sex Addiction, Security, and Trust - CIFT Counseling](https://ciftcounseling.com/sex-addiction-security-and-trust-implications-for-spouses-and-partners-of-sex-addicts/)**
>
> Sex Addiction, Security, and Trust Implications for Spouses and Partners of Sex Addicts Written by Dr. Heather Schroeder, PsyD In the therapy world, the term “healthy attachment” is a concept that is often held as a gold-standard for understanding...

How can I make the headline font smaller on the second page linked but not the first??

Thank you!!  
Veronica

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [October 6, 2017, 10:37am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/2 "2017-10-06T10:37:45Z")

</div>

Hello there,

I hope you are doing well today.

You can use the following CSS code to reduce the font size by going to Appearance \> Customize \> Additional CSS and pasting it there.

```auto
/*Reduce font size*/
.post #header .bottom-header h1 {
    font-size: 20px;
}

```

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [October 6, 2017, 10:37am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/3 "2017-10-06T10:37:46Z")

</div>

Hello there,

I hope you are doing well today.

You can use the following CSS code to reduce the font size by going to Appearance \> Customize \> Additional CSS and pasting it there.

```auto
/*Reduce font size*/
.post #header .bottom-header h1 {
    font-size: 20px;
}

```

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![floodcontent](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/ecccb3/32.png) [@floodcontent](https://colorlibsupport.com/u/floodcontent)\
**Post date:** [November 17, 2017, 4:16am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/4 "2017-11-17T04:16:50Z")

</div>

Hi there, This is actually a question for @vdeluca and Admin if you can an answer. I am researching the issue of Post Titles on mobile having stretched images and enormous text fonts that break up words.

@vdeluca I went to your site [www.ciftcounseling.com](http://www.ciftcounseling.com) and I see you have resolved this issue by fitting the full image for Posts in the header on mobile, with a title inside that.

I have been looking all over forums for a fix for blog posts on my site [www.floodcontent.com](http://www.floodcontent.com). I have plugged in suggested code for Illdy from several forums that seem to be addressing this issue and I have come up with nothing that works. Whatever fix you have for this issue would be ideal for me - I just have no idea how you did it. Would you please share!? I think there may be more than one Illdy Blogger out there who would love to know your secret to resolving this issue.

Ref^ first two attached images.

You also seem to have reduced font sizes for the Blog and other Page headers. If you have any insight into how you did this, I’d love to know. (Ref. last two images.) The real priority is the Blog header though. The giant broken words are not a good look!

---

<div class="post-metadata">

**Author:** ![floodcontent](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/ecccb3/32.png) [@floodcontent](https://colorlibsupport.com/u/floodcontent)\
**Post date:** [November 23, 2017, 11:14pm UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/5 "2017-11-23T23:14:43Z")

</div>

Support? @vdeluca? Can anyone help me out with this please?

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [December 27, 2017, 3:13pm UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/6 "2017-12-27T15:13:46Z")

</div>

Hello @floodcontent,

I hope you are doing well today.

You can use the following CSS code to edit the theme fonts by going to Appearance \> Customize \> Additional CSS and pasting it there.

```auto

/*Post titles*/
@media (max-width: 550px){
#header .bottom-header h1 {
    font-size: 17px;
    line-height: 20px;
}
}

/*Home page*/
@media only screen and (max-width: 767px)
{
#header .bottom-header h2 {
    font-size: 40px;
}
}

```

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![ketanbhagwat](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@ketanbhagwat](https://colorlibsupport.com/u/ketanbhagwat)\
**Post date:** [February 15, 2018, 10:08am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/7 "2018-02-15T10:08:47Z")

</div>

HI,

1. I want to reduce h1 size of my post as highlighted in screen shot.

Please help me out in that.

1. And also Date, month, comment section I want to show at the bottom not at the top of the subject?

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [February 15, 2018, 10:13am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/8 "2018-02-15T10:13:01Z")

</div>

hi @ketanbhagwat  
please provide url of this page and i will check it

---

<div class="post-metadata">

**Author:** ![ketanbhagwat](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@ketanbhagwat](https://colorlibsupport.com/u/ketanbhagwat)\
**Post date:** [February 15, 2018, 10:17am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/9 "2018-02-15T10:17:57Z")

</div>

> **[Tell me about yourself. 4 Free job interview tips](https://accordconsultants.in/tell-me-about-yourself/)**
>
> Whenever interviewer ask tell me about yourself, here are some tips on how to introduce about yourself at job interview to create strong first impression on

URL of my post page.

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [February 15, 2018, 10:38am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/10 "2018-02-15T10:38:29Z")

</div>

Hello there,

You can use the following CSS code to edit the header by going to Appearance \> Customize \> Additional CSS and pasting it there.

```auto

/*Blog Header size*/
.blog-post-entry.markup-format h1 span {
    font-size: 29px;
}

```

As it goes for the meta data, this is hard coded into the theme, so I would not recommend moving that but you can try out the following CSS to move it:

```auto

/*Move meta data*/
#blog .blog-post .blog-post-meta {
    position: absolute;
    top: 4847px;
}

```

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![ketanbhagwat](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@ketanbhagwat](https://colorlibsupport.com/u/ketanbhagwat)\
**Post date:** [February 15, 2018, 10:42am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/11 "2018-02-15T10:42:57Z")

</div>

This code is not working for me. Still same issue  
/_Blog Header size_/  
.blog-post-entry.markup-format h1 span {  
font-size: 29px;  
}

Is below code for moving date, month, comment option below the blow? If yes, then as you are recommending not to do so I won’t do? Please confirm below is for moving the date, month, comment?  
/_Move meta data_/  
#blog .blog-post .blog-post-meta {  
position: absolute;  
top: 4847px;  
}

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [February 15, 2018, 10:55am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/12 "2018-02-15T10:55:39Z")

</div>

Hello there,

1. Please try this code to change the header size instead:

```auto

/*Blog Header Size*/
.blog-post-entry.markup-format h1 span {
    font-size: 28px !important;
}

```

1. That is is the code to move the meta data, it will move the data below the post but it forces the meta data to be moved so it might affect the other elements around it in a future theme update. Now, you can add it and if it causes an error just remove the code, not a big deal but the possibility exists and I wanted to let you know.

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![ketanbhagwat](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@ketanbhagwat](https://colorlibsupport.com/u/ketanbhagwat)\
**Post date:** [February 15, 2018, 11:00am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/13 "2018-02-15T11:00:31Z")

</div>

Great support. Hats off… Thanks a lot…

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [February 15, 2018, 11:03am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/14 "2018-02-15T11:03:31Z")

</div>

Hello there,

Great, is there anything else I can help with? Otherwise, I will go ahead and close this thread.

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![ketanbhagwat](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@ketanbhagwat](https://colorlibsupport.com/u/ketanbhagwat)\
**Post date:** [February 15, 2018, 11:35am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/15 "2018-02-15T11:35:11Z")

</div>

Hi Team,

I have tried below code but now check the attachment. Huge gap created.

/_Blog Header size_/  
.blog-post-entry.markup-format h1 span {  
font-size: 29px;  
}

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [February 15, 2018, 11:41am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/16 "2018-02-15T11:41:50Z")

</div>

Hello there,

Please try adding this CSS to reduce that space:

```auto

/*Reduce title gap*/
.blog-post-entry.markup-format h1 {
    padding: 0px 0px !important;
}

```

Let me know how this works for you.

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![ketanbhagwat](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@ketanbhagwat](https://colorlibsupport.com/u/ketanbhagwat)\
**Post date:** [February 16, 2018, 11:16am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/17 "2018-02-16T11:16:48Z")

</div>

I have pasted this but still not solved

/_Blog Header size_/  
.blog-post-entry.markup-format h1 span {  
font-size: 29px;  
}

Link for your reference

> **[How to write resume? Powerful 6 Things you need to add in resume](https://accordconsultants.in/how-to-write-resume/)**
>
> Your resume is the first change to tell about your self to interviewer before they ask you about yourself. Some tips on how to write resume to get noticed!

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [February 16, 2018, 11:29am UTC](https://colorlibsupport.com/t/changing-font-size-style-for-titles-on-posts-but-not-pages/18410/18 "2018-02-16T11:29:49Z")

</div>

Hello there,

Please check the CSS that you have added and look for :

```auto

/*Blog Header Size*/
.blog-post-entry.markup-format h1 span {
    font-size: 56px !important;
}

```

Once you find it, simply reduce the font size.

Best Regards,  
Support