Header H1 through H6

Seems I have two challenges with H1, H2 and beyond:

  1. Can not get headers below H1 to scale smaller … on desktop.

  2. Same on smaller screens, in addition: truly responsive design to scale down to smaller handheld screens

Here is a site blog page with headers where you may help view headers and sub-headers.

I had used Cornerstone for quite sometime until Pro came out. Now with new versions of Pro I find myself also needing to update from classic elements. Is there something within these upgrades conflicting? I am slowly updating site to replace “classic” elements, but it is not fun.

Hi Toby,

Thank you for writing in, please follow this thread, that should help regarding the size of your headers.

Second, I notice that you have a custom CSS, that is something like this:

@media (min-width: 768px)
@media (min-width: 980px) {
h3, .h3 {
    font-size: 200%;
}
}

Please remove that, as that might conflict with the custom CSS I provided on the other thread I linked.

Also, your site is optimized by WP Rocket. Make sure to clear the caches and minification after doing edits / adding custom CSS to see the changes immediately.

Let us know how it goes,
Cheers!

Thank you. Those @media CSS is for max image size, not h1, h2, etc … Within search images are too large, so I want to control them.

I went to the link you provided, I am unsure how to start with the my-headline.

Does this suggest I create a blog template to edit? I see the “Page Template” customization in “Page Settings”. There seem to be a lot of changes in Pro I have not caught up with. Any suggested list to walk me through changes suggested on link?

Many thanks,

Toby

Hey Toby,

The custom css is clearly for the headings.

@media (min-width: 768px)
@media (min-width: 980px) {
h3, .h3 {
    font-size: 200%;
}
}

If you want this to only applies to the search page, then you should be using this instead:

@media (min-width: 768px)
@media (min-width: 980px) {
.search h3, 
.search .h3 {
    font-size: 200%;
}
}

To have a better understanding with the Responsive Typography in Pro, please check out this changelog:
https://theme.co/changelog/#theme-pro-1-1-0

And when you are not using Pro editor or Cornerstone in creating your content, most likely, the heading tags you add will follow the default font size which may not be as responsive as you expect. You may apply responsive text by utilizing the shortcode. To know more about responsive text and its shortcode, please check it from our knowledge base here:
https://community.theme.co/kb/shortcode-walkthrough-responsive-text/
http://demo.theme.co/integrity-1/shortcodes/responsive-text/

With your content, instead of adding this;

<h2>Comprehensive Documentation … You Shall Not Pass!</h2>

You can have something like this:

<h2 class="responsive-h2">Comprehensive Documentation … You Shall Not Pass!</h2>
[responsive_text selector=".responsive-h2" compression="1.5" min_size="36px" max_size="78px"]

Hope this helps.

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