Home>Support>Vantage Headline multiline option

Vantage Headline multiline option

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Is there an option to introduce a multiline Vantage Headline when the screen is getting smaller? More like a responsive Vantage Headline, where the text gets smaller when the screen gets smaller and at a certain point, text becomes multiline text.

URL: http://www.formstorm.nl/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Wouter

    Shooting from the hip here but try:

    /* Vantage Headline Widget */
    
    @media screen and (max-width: 960px) {
    
    .widget_headline-widget h1 {
    font-size: 26px !important;
    word-break: break-all;
    }
    
    .widget_headline-widget h3 {
    font-size: 14px !important;
    word-break: break-all;
    }
    
    }
    

    Adjust the breakpoint as required and then additionally adjust the font sizes at that breakpoint, as required. the word-break property should split the lines at that point.

    Let me know how it goes.

  2. 10 years, 10 months ago wouteryibs

    Hello Andrew,

    Your solution didn’t work for me unfortunately. However, I found the solution on the web. In Appearance\Custom CSS I added:

    /* Vantage Headline Widget Responsiveness */
    
    @media screen and (min-width: 900px){
       .rwd-break { display: none; }
    }
    

    Furthermore, in Appearance\Editor I changed the line-height of the h3 from 0px to 25px. Now it works well!!

    .widget_headline-widget h3{
    padding-bottom:20px;
    margin:0;
    font-size:16px;
    color:#666666;
    font-weight:200;
    line-height: 25px;
    }
    
  3. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Unless your style.css file is a child theme you’d need to move that line-height change over to Appearance > Custom as all theme files get overwritten during theme update. Just a reminder there.

  4. 10 years, 10 months ago wouteryibs

    Didn’t know that! I just moved all my changes to Custom CSS. Thanks.

  5. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    For sure. Here’s our overview tutorial: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More