Responsive text for mobile using classic elements

Support
#1

Hello, I am trying to set up responsive text for some classic elements in mobile. I found some information in support for the Pro version, but I am not using Pro.

I tried turning on Responsive text and adding the code to the class field but then the text on the desktop was too large. I’m not sure how to maintain the sizes on the desktop and reduce the text size on mobile.

I am having issues with Classic Creative CTA and Classic Custom Headline. Here are screen shots from my phone: https://snag.gy/Df01Zy.jpg

TENWOMENSTRONG is getting cut off.

Appreciate your help, thank you!

#2

Hi @ccwadsworth,

Please check this screencast on how to implement responsive text.
If the font size is too big on desktop, please reduce the maximum size, if the text is still too large on mobile, try to reduce minimum size value. Hope this helps.

#3

Thank you Lely! I appreciate the screencast!
I did as you suggested, but it is not appearing correctly on my phone.
The screen size tests appear normal in Cornerstone, but it is not showing up correctly on my phone.
I used a minimum of 18px and a max of 36px.
I included the .h-responsive reference in the class fields, but it doesn’t appear to be working.
Any suggestions?
Appreciate your help, thank you!

#4

hang on… I think I discovered the issue… in included the “.” prior to the code in the class field:
.h-responsive vs. h-responsive
and that seems to have made a difference!

Update: I have made the minimum size 10px and the text is still not showing up completely.
I have saved the settings, deleted cache and I’m still getting this result on my iPhone 8s

#5

Hi @ccwadsworth,

I could see some of them and not the same as your screenshot, for my initial find is due to the use of class and it doesn’t match with the responsive text selector. Plus, that word is used in many places with many different structures, hence, a single selector wouldn’t work.

Let’s start with the one on your screenshots, but would you mind providing the exact URL where it’s taken?

Thanks!

#6

Hi Rad
The page is https://www.tenwomenstrong.net/programs/
I copied the text from the text selector into the class field and removed the preceding “.”
Is that incorrect?
Thank you!

#7

Hello @ccwadsworth,

The selector should be “.h-responsive”.
Set the minimum font to 12px;
And set the maximum font to 30px.

Hope this helps.

#8

Thanks. Did that, still not changing the appearance on my phone.

#9

Hi @ccwadsworth,

It’s not gonna work since there are two fonts being applied,

Please edit your contents and make sure there is no added font size to the content.

As for the other texts, it’s due to limiting width, could you try changing the compression? Or please add this CSS to the section’s Element CSS

@media ( max-width: 767px ) {
$el .x-container.width {
width: 100% !important;
}
}

Thanks!

#10

Thank you for you response Rad. Thank you for identifying the double fonts. I removed the font size from the element, but I am still getting the same result.

I am unclear about “changing the compression” and I do not have an Element CSS section (I am not using Pro, if that’s why). I did try adding the CSS into the Content CSS but that didn’t make a difference either.

#11

Hey @ccwadsworth,

The responsive text works in your page. Please see this video recording: https://youtu.be/FkduJEoNiW4

If the issue you’re referring to is that the letter G is cut off, that is because the TENWOMENSTRONG word is still big for the screen width. Increasing the Compress value to maybe 1.5 or 2 might help drastically lower the font size down to the minimum value. Right now, it’s not hitting the minimum value.

Hope that helps.

#12

Thank you Christian.
Responsive text is working on my desktop simulation, but not on my phone.
I did adjust the compression under Responsive text and that did fix the issue with the missing “g” on my phone, so thank you for pointing that out!
However, the TENWOMENSTRONG text is still getting cut off on the bottom of the page in the Classic Creative CTA element. I have created a separate responsive text code for this element with a compression of 5 and it still isn’t adjusting the size. I have a minimum of 12px and a max of 24px. I’m wondering if there is still a font size code somewhere that I’m not seeing?

#13

Hello @ccwadsworth,

The 12 px minimum and 24 px maximum was only applied to .cta-responsive selector. Please also change the values for the .h-responsive selector. AT the moment, it is still 12px minimum and 36px maximum.

Hope this helps. Kindly let us know.

#14

That’s correct, that was my intention. The .h-responsive selector is working on the other elements on the page. I wanted to create a separate selector for the Classic CTA element because I needed to use different sizing.

#15

Hi @ccwadsworth,

Classic Creative CTA element has its own Text Size option and that’s what keeps the CTA text to 36px;

Please set that to inherit so it will inherit whatever the value of the Responsive Text Settings.

Hope it helps,
Cheers!

#16

Thank you! That did it! Appreciate your help!

#17

You’re always welcome!

Cheers.

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.