Responsive Text Button not responding

[DaysFinest]

Hi there

I am using responsive text within buttons. I find that on resize of the screen to be smaller the text and buttons reduce satisfactorily, but on any subsequent resize of the screen larger again they do not then grow any larger, remaining small. Is this a limitation of the feature, or am I missing something?

Thanks
Andy

[mikejcarton]

Hi there

In the typography section of the customiser you can edit the pixel size you wish to display for each screen size.

Although this will work on all the text, if you want it on the buttons only I am not 100% sure.

[DaysFinest]

This doesn’t appear to affect the button text once the responsive class is removed, so again unless I am missing something it is not helping with my problem.

I can see that ordinary text using the responsive class I have setup behaves in the expected way, resizing both smaller and larger. Are you aware of something I need to do with the button setup to achieve this two way response, rather than the one way I am getting at the moment?

Is it something to do with the “Base Font Size” setting in the SETUP section for the button and how it interacts with the “Font Size” in the PRIMARY TEXT FORMAT section? I’m not sure what the relationship between settings is here and how it would effect a responsive class?

Thanks
Andy

[rad]

Hi there,

Responsive setup only works when the container became smaller than the content, so thus content respond. The content will not grow bigger as the container size increase. The same goes for responsive text, the solution for that is applying a direct styling to your button, like this

font-size: calc( 13px + 3vw);

The base font will be 13px and it will respond to the screen width. The 100vw is 100% width, so 3vw is 3% increase based on the current screen. If you’ll do this then you’ll have to remove responsive text, else, it will just overwrite that styling.

Thanks!

[DaysFinest]

Thanks for this, being a bit of a novice the “vw” parameter is new to me and I see how it adds a whole new level of control to varying screen sizes. I presume it is efficient to use sparingly?

I’d like to clarify your initial statement though, about responsive setup only functioning when container size becomes smaller. I have to assume you are referring to this specific case as a limitation of responsive setup when applied to button text - otherwise of course ordinary text elements etc will have no such limitation…?

Also just for information in case anybody else at my level of understanding comes across this and needs a few tips -

I found I needed to create the class statement in this way for it to work with the button text

.classname .x-anchor-text-primary {
  font-size: calc(13px + 3vw) !important;
} 

Within the button definition the “SETUP > Base Font Size” setting will still have an effect on the overall size of the button, but not the text. the “PRIMARY TEXT FORMAT > Font Size” is now overridden.

Out of interest I note that when originally using a standard responsive text definition in the class of the button that " SETUP > Base Font Size" is overridden and “PRIMARY TEXT FORMAT > Font Size” will now control the behaviour of the response. A “px” setting completely overrides the responsive definition. An “em” setting of 1 or lower will have the effect of making the text constantly reduce in size to the responsive defined minimum on expansion or contraction of the container. Conversely the text will constantly increase to the defined maximum on expansion or contraction if set to anything greater than 1em.

I presume this is just a quirky part of the overall dysfunction of the standard responsive text definition with buttons?

Thanks again for pointing me in the right direction.
Andy

[christian]

Hey Andy,

The answer for your question is it depends on your design. But, it is good for you to know the CSS method.

@DaysFinest

I presume it is efficient to use sparingly?

Here’s a detailed explanation about responsive text if you’re going to use the CSS route.

Out of the box, there are 2 ways you can achieve responsive text. One is by using the EM unit which is scalable and is based on the root font sizes you set in Appearance > Theme Options > Typography. The other method, you’re going to use the Responsive Text feature. Please see this screencast, to see the difference. I’d recommend that you follow the setup and experiment what values are best for your project. Pause & play the video to follow along with the setup.

Choosing between the methods will depend on your design for different screen sizes.

Thanks.