Getting responsive text to work

[waynepatt58]

have used x theme for 2 years but always struggle with responsive text. will give this one last go.
I setup the title in the pic to be responsive and reloaded the page, cleared every cache I could find, tested on 3 devices (phones) - but still no responsive text?

What am I doing wrong?

[Prasant]

Hello Wayne,

Thanks for asking.

I tested your website on different mobile screen resolutions and text is responsive and I don’t see any issues. However, I did noticed that if screen resolution is 480px or above there’s extra margin on both sides of the screen. To fix that problem, please add following CSS under X > Theme Options > CSS:

@media all and (max-width: 480px) and (min-width: 1024px) {
  .x-container.max {
    width: 98%;
}
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[waynepatt58]

I added that code but the margin is still on the sides, can you please check it out, thanks.

[waynepatt58]

I am just thinking is there a cache somewhere I have missed cleaning out? Is that reason I am seeing different results to you on responsive text as I still cannot get the text to be responsive. I cleaned out the Breeze cache on dashboard and the google chrome cache, then reloaded page. Are there any more caches?

[kory]

Howdy, @waynepatt58!

Thanks for writing in! Responsive Text is currently a bit of a tie-over from our early days of development with X (before the builders and all of that came along). You can read a bit about how the script functions here (even though the article is referencing the old shortcode, the same principals apply):

Use Shortcodes | Themeco Docs

The first thing you need to do is choose a CSS selector. When I went into your page, I saw that the headline you referenced in your screenshots above did not have a custom class assigned that we can use to hook into the script we create later in the builder. To do this, I first went to your headline referenced in the image and navigated to the Customize tab in the control navigation above the Inspector and entered h-sub-header into the Class input like so:

Ultimately, this class can be whatever you want it to be. The most important things to remember are:

1. Whatever you pick here must match what you setup in the Responsive Text configuration later
2. Make sure you don’t enter in the . placed before class names when styling CSS, we’re merely declaring our class here, not referencing it

Next, we go over to the Settings Modal, and for your version of the builder you would go to Page Settings and then find the Responsive Text section. I deleted your old selectors as they were not doing anything, and added a new item labeled Sub Header as found below:

Notice that our Selector field states .h-sub-header .x-text-content-text-primary. The first part is our class given to the element from earlier, and since you’re using a v2 Text Element, we need to find the appropriate piece inside the element to adjust the font-size. The font-size is applied to the second selector in that statement, so to overwrite the size, that is the piece we need to target. Alternately, since you’re using an h2 tag for your text within this Element, you could also do:

This looks a little nicer, but if you ever changed the tag down the road you’d have to come back here to update this part again, so using the class like the first example eliminates that concern moving forward.

Finally, I set the compression to 1 (which is a good place to start, and can be adjusted to suit), and then set some minimum and maximum font sizes for you. Now, when I look at the front of your site I see:

When sizing your screen up and down, you’ll see that the text shrink according to your settings. These are a few of the considerations needed when utilizing this responsive text implementation with v2 Elements (the biggest thing is to make sure the right selector is applied and set on all accounts). Hopefully this helps to point you in the right direction moving forward, cheers!

[waynepatt58]

Thank you, that now works, was missing the second part it seems.

[rubin]

Great to hear!