H1 and h2 don't resize in blog post content

[blog42]

Hi,

There is some problem with the responsive behavior of my blog posts. While the post title font shrinks for the tablet and phone views, the h1, h2, h3 (and possibly other - these are just the styles I noticed) in the text of the post remain the same size and thus look huge compared to the other content. Please see screen shot.

The “These just keep coming…” is h3, and even though the post title and image shrinks for smaller screens, the content doesn’t seem to change. It looks weird that headlines within the post are bigger than the post title.

How can I fix this?

Thanks!

[blog42]

Actually, one addition: I noticed the same happens with a custom headline element on a page. It doesn’t resize so it takes up the whole screen on a phone.

[christian]

Hey Robert,

The headlines except for the entry title are not responsive out of the box. You will need to setup the responsive text globally in Theme Options > Typography.

Then, if you still don’t like the overall outcome of the global responsive text, you can use the Responsive Text shortcode to individually target each of your headline in your page to have font size control thus controlling how the specific headline flows in your content.

If you want to change the size of the headlines globally, regretfully, you will need custom CSS like the CSS below. It uses rem unit so it will still be based on the font-size setting in Typography. You will just be overriding the scale. You can use other scalable font size units like em and % but I won’t be going through that because that would need further technical explanation. Please watch the screencast in the secure note for explanation.

.entry-content h1 {
	font-size: 2.1rem;
}
.entry-content h2 {
	font-size: 1.9rem;
}
.entry-content h3 {
	font-size: 1.7rem;
}
.entry-content h4 {
	font-size: 1.4rem;
}
.entry-content h5 {
	font-size: 1.2rem;
}
.entry-content h6 {
	font-size: 1rem;
}

Please just note though that issues that might arise from the use of the custom CSS and further enhancements are not a part of our support. Headline sizing control is a known feature request so there might be an official option in the future.

Thanks.

[blog42]

Hi, thanks for the reply.

Changing the typography settings helped a bit, since now the text scales, but different elements of the page scale differently. For example, on big screens the title of the post is the same size as the h3 element in the post content, but once I switch to mobile the title shrinks much more than the h3.

Is there any way to make everything scale the same way so that the proportions are kept?
Thanks again

[ruenel]

Hello There,

When visiting the Typography options in ESPONSIVE TYPOGRAPHY, you will find a new Root Font Size section. Using these options, you are now able to specify a root font size for your website at each breakpoint. For more information about “Responsive Typography”, please check out our changelog:
https://theme.co/changelog/#theme-pro-1-1-0

Hope this helps.

[blog42]

Yes, thank You, that helped!

[Prasant]

You are most welcome.