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

Illdy
1

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”:

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

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

Thank you!!
Veronica

2

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.

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

Best Regards,
Support

3

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.

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

Best Regards,
Support

4

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

5

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

6

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.


/*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

7

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?
8

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

9

URL of my post page.

10

Hello there,

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


/*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:


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

Best Regards,
Support

11

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

12

Hello there,

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

/*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

13

Great support. Hats off… Thanks a lot…

14

Hello there,

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

Best Regards,
Support

15

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

16

Hello there,

Please try adding this CSS to reduce that space:


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

Let me know how this works for you.

Best Regards,
Support

17

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

18

Hello there,

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


/*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