This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Vantage headling responsive line spacing

Resolved 4 replies technicalthemetheme-vantage
MJ
10 years ago · Last reply by MJ 10 years ago

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!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. Support Assistants 10 years, 2 months ago

    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;
	}
}
  2. MJ 10 years, 2 months ago

    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?

  3. Support Assistants 10 years, 2 months ago

    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.

  4. MJ 10 years, 2 months ago

    Thanks, that worked. The text gets smaller when collapsing the browser into responsive mode and the line spacing adjusts properly.

    Much appreciated!

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread