I need help to change my H1

Support
#1

Hello
I have used the following code which I found on someone elses post to change the size of my headers to make them all uniform, which is great. The problem is my post heading is not changing size. I thought this would be under h1 (90 px) but it is not changing. Can you please help.
Thank you.

h1, .h1 {
font-size: 90px;
}
h2, .h2 {
font-size: 60px;
}
h3, .h3 {
font-size: 60px;
}
h4, .h4 {
font-size: 45px;
}

How to set font sizes on different breakpoints for H1, H2, H3
Site wide adjustments to font size without adjusting fonts in layouts
#2

Hi Bryan,

I am not sure having fixed pixels like that for the font size is a good idea. Because it will be too big for mobile and responsive devices.

We suggest that you think of a more innovative responsive approach like this one:

https://www.w3schools.com/howto/howto_css_responsive_text.asp

I also will need to have the exact URL of the title that you are talking about to be able to provide you with a better alternative.

Thank you.

#3

Hello
This is an example of what I mean.


The post title ‘Why do rats have tails’ is smaller than H2, H3 and H4 headings. I want the title to be bigger than the rest of the headings. Also, you were right about there being a problem on mobile screens.
I want my titles to be larger than the headings but still be able to read them on my mobile phone.
You’re help would be appreciated, the simpler instructions the better as I am a newbie when it comes to this.
I think one of my problems is that on my earlier posts I was putting the headings as H3 and H4 when I should have been choosing H2 and H3. Im not sure if I need to go back and change all these manually.
Thank you for coming back to me so quickly. I look forward to hearing from you.

#4

Hello Bryan,

The post title is using a different class.

h1.entry-title {
    font-size: 200%;
}

Please have this code included so that you can also have a control of the font size for your post titles.

Hope this helps.

#5

Thank you so much. That works brilliantly.

#6

We are delighted to assist you with this.

Cheers!

#7

Hello
I have just checked this on my mobile on the following but it doesn’t fit on the screen. Is there a way to make it adapt to any screen size?
https://northamericanmammals.com/what-is-the-difference-between-a-stoat-and-a-weasel/?preview_id=1931&preview_nonce=56b6edc0d2&preview=true&_thumbnail_id=1947

#8

Hi Bryan,

We can use media query to adjust font size on mobile like this:

@media( max-width:480px){
h1.entry-title {
    font-size: 200%; /*Set your preferred font size on mobile*/
}
}

Hope this helps.

#9

Thank you so much. One more thing if that is OK. How do I get my titles on my home pages to fit the size of the pictures on mobile. Im guessing this would be something similar. Thank you.

#10

Hey Bryan,

I’m sorry but I’m not sure what you want by

The title looks fine on mobile.

Please elaborate.

Thanks.

#11

I agree that some of them do, but longer titles such as What is the difference between a stoat and a weasel, cuts off at What is the difference between… Is it possible for these longer titles to fit as well?

#12

Hi Bryan,

Thank you for the clarification. Try adding this:

.x-post-carousel .h-entry-cover span {
    overflow: visible;
    white-space: normal;
}

If you need further help, please open a new thread instead. This is to make sure threads are relevant to their title. Thanks.

#13

Will do and thank you again for all your help.

#14

You’re welcome, Bryan. We’re happy to have helped.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.