[Resolved] Hero Element Change Font

[Janet Davis]

Hello,

I wanted the font in the hero element to be smaller.
I put this into the CSS, but it did nothing.

h1.page-hero {
font-size: 20px;
}

The following is in the element: I also tried H2, H3 etc to make the font smaller too, but it didn’t work either.
<h1 class=”hero-header”>Clean Copy Equals Better User Experience and Saves You Money</h1>
<hr class=”hero-rule”>

Thank you
Jan

[David]

Hi there,

in Customizer > Additional CSS there is this CSS:

/* home hero headline */
.hero-header {
	font-size: 70px; 
	line-height: 1.3em;
	text-shadow: 1px 1px 2px rgba(20, 20, 20, 0.4);
}

/* home hero mobile headline */
@media (max-width: 768px) {
	.hero-header {
		font-size: 50px;
		line-height: 1.1em;
	}
}

This is currently setting the desktop and mobile font sizes.
You can either edit this CSS to suit. Or if you want the header element to respect the customizer sizes then just remove or comment out that CSS.

[Janet Davis]

Sweet! Worked like a charm thank you so very much!

[David]

Glad to be of help

[Author]

Posts