Headline Spacing Issue

[isdg01]

Hello,

I am working on a new site and everything has been working great. However, I recently changed up some headlines and while it looks correct in Cornerstone, the display is adding space above both my headlines and my sub-head. I have totally rebuilt the section multiple times, removing the Classic Headline and replacing it with the current version of the Headline, but it keeps adding the space. It’s only happening on this one page. I have compared the setup to other pages that are displaying correctly and everything matches. While inspecting the page in Chrome tools, I see the extra space above both the headline and sub-head, but it’s not showing me where it’s coming from. I was hoping you might be able to take a look and help me figure out where the extra spacing is coming into play.

Thanks,
Dawn

[prakash_s]

Hello Dawn,

Thanks for writing to us.

I have checked the page URL you provided and noticed that a broken HTML error is the reason behind your issue. It appears that custom HTML was added to the element CSS section, which is not correct. The element CSS box should only contain CSS code. Please review the screenshot below for reference.

Hope it helps
Thanks

[isdg01]

OK, not sure how that code was placed in there… but I found it and yes, it cleared up the headline issue. I definitely did not look at the modals when trying to figure out the headline issue.

This might need a different topic created, but since you pointed to the error being in the modals, my next issue is that the modals don’t seem to be responsive. Please let me know if I need to create a new topic for help with that.

Thanks,
Dawn

[prakash_s]

Hello Dawn,

I would suggest you please have a look at this documentation to learn more about how to style responsive layouts using the Cornerstone element settings.

Responsive Styling | Themeco Docs

How to Manage Responsive Styling in WordPress with Cornerstone

If this does not resolve your issue, kindly create a separate support thread and share detailed information along with a marked screenshot. This will help us replicate the issue on our end and provide you with proper guidance.

Thanks

[isdg01]

Thanks. I’ll review the video. I’ve made some tweaks and it’s looking better on desktop and small screens, just funky on the in between sizes.

[isdg01]

That was a good refresher. I think I have it all straightened out now. Appreciate it!

[tristup]

Hi @isdg01,

Glad that we are able to help you.

Thanks

[isdg01]

Hi,

The tutorial you shared yesterday helped with getting my modals to work responsively. It was also showing tips to resize headlines, but nothing I tried made my headlines smaller on mobile. They all use “inherit” in the settings and I am currently using H2 for sizing while setting H1 for the priority, as well as H3 for H2. Can you point me in the right direction to change my headline font sizes? This has always been a little confusing for me.

Thanks in advance,
Dawn

[prakash_s]

Hello Dawn,

Please note, if the font size is set to “inherit,” it will be taken from the parent container DIV. To assist you further, could you kindly provide the exact page URL and a marked screenshot indicating where you wish to change the font size? This will help us understand your requirements and address your issue efficiently.

Thanks

[isdg01]

Hi Prakash,

The headlines are set the same throughout the site, but you can look at this page for reference.

The Global Leader in Tailored Wafer Sorter Solutions | NADAtech

Thanks

[prakash_s]

Hello @isdg01,

I have checked the page URL you provided. It appears that you have added the Headline element with the default HTML tag set as H1, but inside it, you have placed an H2 tag, which is not correct HTML structure. You do not need to add another heading tag within the H1. If you want the heading to be an H2 instead, you can change the HTML tag setting of the Headline element directly.

Please change it and clear your browser cache, and recheck it again.

Thanks

[isdg01]

Yes, I set it that way to get the size I wanted while still have the H1 tag set. I don’t know how to change the default heading sizes, which is what I need direction on. In the old X Theme, you had settings available to use a different H tag for the text, so that is what I was attempting to do here. That was probably deprecated awhile back… Here are a couple of screenshots showing how the headings are taking up too much space on mobile.

[prakash_s]

Hello @tristup,

I checked your given page URL, and it seems that you have a heading tag inside a heading tag; you need to remove it and set the correct heading tag per your design.

You need to go to the Text format -> click on the size and set the size for each breakpoint.

Hope it helps
Thanks

[isdg01]

OK, I’m playing with the Markets>OEM Products page. I have reduced the base font size in the global settings, which helped when changing back to the original H1 and H2 tags. However, when I go to the settings in your screenshot for responsive changes, which is where I was looking yesterday, nothing is changing. Since it’s set at 1 em, I am entering .5 em. Why is the headline size not changing when I change that value? What value should I be using to make a visual difference?

[isdg01]

Playing with global settings for the Root Font Size is helping, but my H1 tags won’t fit on one line as they were previously. I need the H1 tag but at a smaller size, even on large screens. This is where I need help. I’ve changed the Markets/OEM Products and Markets/IDM Solutions pages. The smaller screens are looking better, but these changes were made in the Root Font Size global settings, not in the responsive viewport. Nothing changes visually when I make changes to the responsive port section. I have not changed the H tags on other pages yet as I need to get it working properly on these 2 pages first.

Can you provide other suggestions after reviewing my global settings?

[ruenel]

Hello @isdg01,

Please take a look at the test page I created.

• See the URL in the secure note below

I am using the Headline element settings, not relying on the Global Headline styles. This means that I ditched the <h2> HTML tags you added in the headline.

I then set the element’s font size in the Text Format options:

And then applied the Responsive Styling:

Hope this makes sense.

[isdg01]

HI Ruenel,

Thank you for putting together the test page. Much easier to understand the workflow now and I am following what you have put together. I do have one very important question… With no H tag set on the text itself, will the H tag setting for the headline element still work for SEO purposes? I am assuming yes… I’m just now getting into this so will let you know if I have further questions.

Dawn

[ruenel]

Hello Dawn,

When using the Headline element, setting the HTML tag should help improve your SEO. Just ensure that you have only one H1 on a page.

Cheers.