Skip Navigation

[Resolved] Some issues with Typography settings on lower screen sizes

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 7 replies, has 3 voices.

Last updated by martinE-4 8 months, 2 weeks ago.

Assigned support staff: Nigel.

Author
Posts
#1541645

I have noticed that the Typography Font style settings seem to not work correctly between device sizes.

Problem: The Font style (B, I, U, strikethrough) is hard to turn off for lower device levels (ie. if a style exists on desktop it is hard to remove it on tablet and reinstate on mobile).

- create a Toolset container block and put a paragraph block inside it
- in the container typography settings try changing the Font Style (B, I, U etc) to make it different at different device levels. I think you will quickly see that it is hard to turn on say Underline on desktop and then turn it off for a lower level like tablet or phone. I had trouble with various combinations. The 'switches' do not seem to have an 'on' or 'off' position.

What works correctly:
anything that has a numeric or text input like, size, font, line height, color.

So as far as I can tell the only problem is with Font style not being easy to get right.

#1543015

The buttons are highlighted if active, see screenshot

As soon I switch to other device sizes the highlight disappears, telling me it's not active on that size, so I can activate it as well.

This seems to work fine and in a user-friendly way to me.

Can you elaborate on the issue?

#1543365

Sure, happy to elaborate, (I am in the block editor, with the top editor button "ignore the device width in the preview" highlighted).

Here is a basic example:
1. Start with Bold on Desktop
2. Go to Tablet size and try to turn it off. - (The B icon seems to have no effect in either the highlighted or unhighlighted state)

If you play around with it I think you can see the difficulty of controlling the smaller device sizes when the larger device is set. I understand the principle of a cascading style but I think there should be a way of seeing what style is cascading from the larger device and being able to turn it off easily.

Here is an example with the Italic tag:
1. start with turning on Italic on Desktop - no problem
2. go to Tablet and try to turn it off - (firstly, the italic icon is NOT lit up, Ok, but if you click it to turn it off, the icon stays lit, but yes it turns off italic - counterintuitive)
3. Now go to Mobile and try to turn italic on (The italic icon seems to have no effect in either the highlighted or unhighlighted state)

These are just two examples. Let me know if more elaboration is needed. I could make a detailed table of unexpected UI behaviors like I did for the hidden block problem but that takes time.

Note: it occurred to me during this analysis that font weight is an important font property missing from the typography box. Given that it is a numeric value, it is probably easy to implement like font-size.

#1545537

Yes, you're right, it does not work as we would expect.

I've escalated this issue, and unfortunately, I couldn't find a simple workaround here.
I'll actually ask for another test round on the entire feature, I am not convinced by how it works now: It is practically not usable because each time we design for other screen sizes we have to face new challenges.

I will keep you in the loop here about fixes.

I also asked for font-weight, the general answer is that we have a Bold setting and that we do not offer other settings like hidden link
I suggest you submit this request to https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/
The developers pointed out there might be issues with most fonts not supporting all the options.

#1545919

Thanks for talking to the devs Beda. I am looking at everything I do really closely and trying to make Toolset with the new Views/blocks the best product possible (you can see how some of my other tickets with Luo and Nigel have been escalated too). Really appreciate the support.

I'll submit a nice request to new features for font-weight and mention how other page builders and themes like GeneratePress incorporate it in their design. (have to keep up with the competition!) - smile.

#1546583

😀

Yes, this is great.

Thank you for the continued trust and inputs!

#1612353

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Martin

This should now be fixed with the releases of Blocks today.

Please let me know if you still see any problems after updating (use the Check for Updates button on the registration page if you don't see the updates available).

#1612809

It works well now. If I turn Bold on in Desktop it can be turned off in Tablet by clicking twice on Tablet (once to turn it on and then again to turn it off). My issue is resolved now. Thank you! And pass on my thanks to the devs!