Hi guys, I’ve been looking for a Vantage headline fix for the line spacing. When I collapse a browser window into responsive mode, the Vantage headline makes a crowded display of the headline on multiple lines. Is there a CSS fix for this? Viewers on small monitors get this look too where there is no leading or white space between the headline text when there is more than one line.
Here’s an example: http://imsone.com/winterrun/wp-content/uploads/2015/12/vantage-headline-spacing.png
Here’s the homepage of the site: http://imsone.com/winterrun
thanks again in advance!
Hi M
In your child theme style.css file, you’re targeting the headline widget h1, twice I believe. Both rules include !important on the font size declaration. Please, remove those !important hacks and then add a media query below, something like:
/* Headline Widget */ @media (max-width: 780px) { .widget_headline-widget h1 { font-size: 16px; } }Thanks for the followup. I pulled the child-theme style sheet CSS that addressed the h1s. That CSS was leftover from cloning another site with Duplicator so that should have come out from the start. The CSS you supplied works for the line spacing but the font remains too small. When I add the customizations in color and size I lose the proper line spacing.
I tried adding this your code but there was no effect.
{ color: #071A42 !important;
font-size: 50px !important;
text-align: center !important;
}
This is the code I usually use to change the headline widget but line spacing/crowding occurs:
/* Headline Widget main – size, align*/
.widget_headline-widget h1 {
color: #071A42 !important;
font-size: 50px !important;
text-align: center !important;
}
Other suggestions?
Thanks for your feedback.
At Appearance > Custom CSS, please, remove the !important that is being used after the font size value. This is how your rule should read once the !important has been removed.
/* Headline Widget main - size, align*/ .widget_headline-widget h1 { color: #071A42 !important; font-size: 50px; text-align: center !important; font-weight: 800; }Directly below the rule, insert:
@media (max-width: 780px) { .widget_headline-widget h1 { font-size: 25px; } }16px in our initial reply was a starting value. I’ve increased it to 25px. You can edit both the 780px breakpoint and 25px value for the font size.
Thanks, that worked. The text gets smaller when collapsing the browser into responsive mode and the line spacing adjusts properly.
Much appreciated!