[Jason GParticipant]

New to X and wondering how to use Responsive Text. In the classic Editor I used the X dropdown to add the Responsive Text and the code and text show in editor but nothing shows on the live page?

I tried using the Visual Composer and it ask for me to create a selector. Do I need to create a class for Responive first? I noticed this code below at the bottom of the integrity demo page but didn’t see the class assigned text? Just need more instruction on how to use this.

[responsive_text selector=”.resp-h” compression=”1.35″ min_size=”36px” max_size=”64px”] [responsive_text selector=”.resp-h-timeline” compression=”0.85″ min_size=”28px” max_size=”54px”] [responsive_text selector=”.resp-p-timeline” compression=”2.35″ min_size=”16px” max_size=”24px”] [responsive_text selector=”.resp-p-fonts” compression=”2.65″ min_size=”18px” max_size=”21px”] [responsive_text selector=”.resp-p-layouts” compression=”2.65″ min_size=”18px” max_size=”21px”] [responsive_text selector=”.resp-p-woocommerce” compression=”2.65″ min_size=”18px” max_size=”21px”] [responsive_text selector=”.resp-p-styles” compression=”2.65″ min_size=”18px” max_size=”21px”] [responsive_text selector=”.resp-p-buy” compression=”2.65″ min_size=”18px” max_size=”21px”]

Also, will images scale automatically?

[Jason GParticipant]

Centering text on Tablets and Phones. If I have text aligned left how do I make it convert to centered on mobile?

Also on the demo content for Integrity I noticed some text is hidden then the same text is repeated but not hidden. Why is this necessary?

[visibility type=”hidden-phone”] [content_band no_margin=”true” inner_container=”true” bg_color=”transparent” bg_image=”https://theme.co/media/x-home-5-bg-timeline-gray-right-comp.png”] [column type=”one-half”] [gap size=”21%”]
Stacks

Choose from multiple, completely unique designs built into one incredible theme – no additional setup required. There are currently three Stacks to choose from (with more in development). Tell me more…

[/column] [column class=”center-text” type=”one-half” last=”true” fade=”true” fade_animation=”in-from-right”] [image class=”mbn” src=”http://placehold.it/559×559″ alt=”Stacks”] [/column] [/content_band] [/visibility] [visibility type=”visible-phone”] [content_band class=”center-text” no_margin=”true” inner_container=”true” bg_color=”transparent”]
Stacks

Choose from multiple, completely unique designs built into one incredible theme – no additional setup required. There are currently three Stacks to choose from (with more in development). Tell me more…

[image class=”mbn” src=”http://placehold.it/559×559″ alt=”Stacks”] [/content_band] [/visibility] [visibility type=”hidden-phone”] [content_band style=”margin: -80px 0 0;” inner_container=”true” bg_color=”transparent” bg_image=”https://theme.co/media/x-home-5-bg-timeline-gray-left-comp.png”] [column class=”center-text” type=”one-half” fade=”true” fade_animation=”in-from-left”] [image class=”mbn” src=”http://placehold.it/559×559″ alt=”Experts”] [/column] [column type=”one-half” last=”true” class=”right-text”] [gap size=”21%”]

[KoryKeymaster]

Hey Jason,

Thanks for writing in! If you haven’t taken some time to do so, read up on this page to see how to utilize the [responsive_text] shortcode properly. It’s a little more involved than just adding the shortcode itself as you need to pair it up with a class selector throughout your page for the various elements you want to target. That post above goes into greater detail on the matter.

Images do scale automatically in X. If you add an image into your content you will see this in action.

Regarding why we repeat this content on the first demo, it is because on our “desktop” view, we have used some background images to create the timeline effect you see. One mobile however, we do not want this, so we are displaying the same content but without the background images on the rows so that things are nice and clean on mobile.

Let us know if you need anything else, thanks!

[Jason GParticipant]

Once I setup the responsive text selector can I use that class on any text or or custom headings throughout the site or does it have to be setup on each page? I tested and it seems if I include my responsive selector on the home page then it carries through the site.

[KoryKeymaster]

Hey Jason,

The responsive text selectors will only work on that particular page. It will not carry over to a new page, so if you have multiple areas that you’re wanting to use this in, you will need to set each one up independently.

Thanks!

[Jason GParticipant]

That’s what I thought but I created an responsive-hc text selector on homepage and assigned it to text on the About page….it is carrying over and working….which is great…just want to make sure it isn’t going to create any sort of error.

[KoryKeymaster]

Jason,

That’s very strange as it should only work on a page by page basis as long as you have a [responsive_text] shortcode present on that page and the proper selectors setup to work. Are you sure you don’t have a [responsive_text] shortcode setup on this other page as well?

[Jason GParticipant]

I do but they are different. I have responsive-hc set on homepage and used on About page. Oh well. It’s working. I’m good.

[KoryKeymaster]

Jason,

Sounds good to me, haha. 🙂

Thanks.

[GregVeresParticipant]

Is there somewhere that describes how to use responsive text using cornerstone? I can’t seem to get it to work.
I am creating the responsive text on the config “tab” under responsive text and then I have put the selector in the class id field for the text field.
My text is in a span within the text field. Here is the “text” of the text field:
<p style=”text-align: center;”><span style=”color: #000; font-family: roboto; font-style: normal; font-weight: 500″>Money-Wiser</span></p>

it only ever stays small.

Thanks
Greg

[GregVeresParticipant]

Ok a little more digging reveals that it is the <p> that is screwing it up because the integrity theme has a font-size: 16px as part of the p class.
So I removed the <p style=”text-align: center;”> from my text field. My text field now only includes:
<span style=”color: #000; font-family: roboto; font-style: normal; font-weight: 500″>Money-Wiser</span>

but when I look at the generated page there is still a paragraph wrapping the text. I believe it is coming from the text field itself. So how do you get responsive text to work in Cornerstone?

Thanks
Greg

[GregVeresParticipant]

I even cleared the formatting for this text field. It removed the span and just left the text, but the text is still embedded in a <p>.

[FriechModerator]

Hi Greg,

Yes, that <p> tag is coming from the Text element. To apply an Responsive settings to a text, assign an class to the Text element

And then use that class to be the selector of the Responsive text setting

Feel free to adjust the compression, minimum, and maximum size option.

You can even use that class to style your text, with that said you don’t need to wrap the text on a span tag.

.resp-txt {
	text-align: center;
	color: #000;
	font-family: roboto;
	font-style: normal;
	font-weight: 500;
}

Add this under Custom > CSS in the Customizer.

Hope it helps, Cheers!

[GregVeresParticipant]

I did exactly that but the problem is that the .resp-txt class gets applied to the div, then within that div the text gets put into a <p> and <p> has a specific font size assigned to it.

Ok I figured out my problem. I have the Easy google fonts plugin installed and I must have set <p> to use 16px fonts. This was interfering with doing responsive text in cornerstone.

Problem solved. it is working now.

Thanks
Greg

[John EzraMember]

You’re most welcome and glad you got it to work!

[Author]

Posts