Cannot resize H2 header font

[michaelm73]

Hi all,

Some very freaky sh1t is happening with h2. I have spent hours tonight attempting to resize the font but to no avail. It resizes as it should in the editor, but as soon as I publish the size jumps up again...... See screengrabs (h2 has green box around)

I can style the font size of H1 and H3 headers no problem at all, so I believe it has something to do with the Weebly backend code involved with the Title Widget in the editor (which I believe creates H2 headers). Please can you help me fix this guys at Weebly? It's very annoying! Thanks a lot.

[michaelm73 · Accepted solution]

Have done a javascript fix so can now style h2 as wanted. Allelujah.

[michaelm73]

 PS I am using CSS to style the header fonts.....

h1 {
	font-family: 'Carrois Gothic', sans-serif !important;
	/*font-size: 24px;*/
	font-size: 1.5em !important;
	font-weight: normal;
	color: #484848;
	/*padding: .3em 0;*/
	text-transform: uppercase;
	border: 1px solid #ff0000;
	padding: 0.5em;
}

h2 {
	font-family: 'Carrois Gothic', sans-serif;
	/*font-size: 20px;*/
	/*font-size: 1.25em;*/
	font-weight: normal;
	color: #484848;
	/*padding: .3em 0;*/
	text-transform: uppercase;
	border: 1px solid #0F0;
	padding: 0.5em;
	font-size: 1em !important;
}

h3 {
	font-family: 'Carrois Gothic', sans-serif;
	/*font-size: 16px;*/
	font-size: 1em;
	font-weight: normal;
	color: #484848;
	padding: .3em 0;
	text-transform: uppercase;
	padding: 0.5em;
}

[whitemonkey]

I think the  h2    is limited to a certain maximum size within the css/html

H3 and h1   arent in the css  which is why u can change them

@michaelm73 

[michaelm73]

Any idea why that is? I don't see that it makes sense to restrict the h2? Why not allow styling?

Should be fairly standard and the concensus is that the order of header tags is important, so skipping to h3 because I can't style h2 doesn't make for good seo:

https://moz.com/community/q/using-h3-before-or-instead-of-an-h2

[whitemonkey]

from God:

https://www.searchenginejournal.com/google-h1-headings-seo/328459/

@michaelm73 

[michaelm73 · Accepted solution]

Have done a javascript fix so can now style h2 as wanted. Allelujah.

[whitemonkey]

Can u share that ?

[michaelm73 · Accepted solution]

Sure. This overrides the !important declaration that occurs in this inline selector which set the h2 font size to 26px.

Original selector:

.wsite-elements.wsite-not-footer:not(.wsite-header-elements) h2, .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-long .product-title, .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-large .product-title, .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-small .product-title, #wsite-content h2, #wsite-content .product-long .product-title, #wsite-content .product-large .product-title, #wsite-content .product-small .product-title, .blog-sidebar h2 {
    font-size: 26px !important;
}

Here's the script, which I've included in the footer:

<!--Override Weebly's !important on h2 font-size-->
<script type="text/javascript">
	$("h2").each(function () {
    this.style.setProperty( "font-size", "20px", "important" );
});
</script>

[whitemonkey]

@michaelm73 

Hmm

Thanks for sharing   ) though this type of coding is a little out of my league

The coding   a few messages up was interesting     i might give that a try     see how it behaves.   )