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.
Vantage Headline multiline option
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
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.
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; }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.
Didn’t know that! I just moved all my changes to Custom CSS. Thanks.
For sure. Here’s our overview tutorial: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/