Need help with responsive text in X Theme

[blissville]

Hello X Team,

I am trying to make the text on a homepage in the first section on the page responsive. I have three elements: two are classic custom headlines and one is classic text. I need the custom headlines to be responsive, but I also need the classic text element to be responsive. The settings for these two would obviously be different, as I would need to set different max and min font sizes for them. However, when I try to add more than one responsive text item in settings, that does not seem possible. I have two responsive text items, and if I change settings in one of them, the other one changes to match. I don’t understand. How am I supposed to be able to target different sized headings on my page that I need to make responsive with different min and max values?

If responsive text cannot be applied to the classic text element, that is fine - I could change that classic text element to a custom headline element with a different H size, IF I can set up two different responsive text items to apply to my two different sized elements. But the other problem is that although I think I have set up the responsive text item to apply properly to the two custom headline elements, they are not behaving responsively - they are not getting smaller on mobile devices. Can you please help me?

Website homepage: http://dev.asv1.com/
Wordpress v 4.8.2
X Theme v 5.1.0
Cornerstone v 2.1.0

I will include credentials in a private reply.

Thanks,
Rayna

[blissville]

Just to be very clear, the headings and text I am referring to at the top of the homepage are:

WE ARE ASV (custom headline)

A full-service events and experiential marketing company with over 28 years experience designing, building and executing immersive B2C and B2B live marketing experiences for agencies and brands. (currently text element, could be changed to a custom headline)

IMAGINE. CREATE. GO LIVE (custom headline, same size as first one)

[lely]

Hi Rayna,

Thank you for detailed information. Multiple responsive text should work on a single page. Unfortunately as of the moment there is a known issue when saving multiple instance of responsive text it updates everything as one.

What I can recommend at the moment is to use version 2 TEXT element instead of classic text . Then under Text Tab > Font size, use REM. See this: https://css-tricks.com/confused-rem-em/

Set your basefont here: X > Launch > Theme Options > Typography

See this sample: https://screencast-o-matic.com/watch/cbX1V52jd4
That is another way to set responsive text.

[blissville]

Thank you for your suggestion Lely, however I am still not able to achieve what I am trying to do. Take a look at the page http://dev.asv1.com/ and look at the top section where it says:

WE ARE ASV

A full-service events and experiential marketing company with over 28 years experience designing, building and
executing immersive B2C and B2B live marketing experiences for agencies and brands.

IMAGINE. CREATE. GO LIVE

Try looking at it in different sized browser windows, and try just resizing the browser on the fly. I have recreated the first two lines using your suggested method of using v2 heading and text elements, and setting the text size with an REM value. The third line I left as responsive text. NONE of the text in these lines resizes. About all that happens is the middle text with the smallest size, line breaks as the browser gets smaller. I need the TEXT on each of these lines to actually get smaller itself. The font size needs to change responsively. How do I achieve that? Why is the third line, which has responsive text, not behaving responsively and not getting smaller when the browser window gets smaller??

Please help.

Thanks,
Rayna

[christian]

Hey Rayna,

What @Lely suggested is correct. You can either use EM or REM. What you missed is you did not apply the responsive text class to the first headline element and also the text element. You applied it to the Classic Headline element but your Responsive Text setup subtly takes effect. You need to drastically play with the Compress, Minimum Size and Maximum Size.

I’ve created a test page at http://dev.asv1.com/x-support-test/. The setup is as follows:

1. New V2 Headline using your “WE ARE ASV” as the main headline with 2 EM font size and your paragraph as the Subheadline with 1.2 EM font size
2. New V2 Headline using your “IMAGINE. CREATE. GO LIVE” text with 2 EM font size
3. Responsive Text with Compress value of 5, Minimum Size of 5, Maximum Size of 50 and Selector applied to the headline elements’ Class field.

Please follow along with this screen recording when setting up responsive text. Slow it down if you need to.

Here’s the effect in the front-end:

Thanks.

[blissville]

Thank you so much for this thorough explanation! I followed your instructions exactly, but for some reason, the second v2 headline that I created (IMAGINE. CREATE. GO LIVE) is not being responsive in the same way as the first v2 headline (WE ARE ASV). Can you please help me figure out why? I cannot figure it out. All of the settings in both headline sections are exactly the same. This is the last piece of the puzzle!

Thanks,
Rayna

[ruenel]

Hello Rayna,

I have logged in compare both the headings. Yes they do have both the same settings. Until when I check the custom css and you have this added:

    .el20.x-text{
        font-size: 1.1rem;
    }

    .el12.x-text .x-text-content-text > span{
        font-size: 2.2rem;
    }

    #imagin_create_go_live > span{
        font-size: 1.5rem;
    }

Please remove this custom css and test again.

[blissville]

Thank you so much! This must have been done by another developer that was working on this project. I appreciate your help! I found one more setting that was awry actually. I was using REM settings for the main headlines an EM settings for the sub-headline and that was messing things up but I figured it out. Thanks to all of you who helped me figure this frustrating piece out!

~ Rayna

[Joao]

Glad to hear we managed to help Rayna!