XF 2.2 Responsive font size in posts?

[Luke247]

For example, when the font size is 26px (in a post), how can I make it automatically resize to 18 px in mobile, either using .less or with a code in the post?

Thank you in advance.

 

[briansol]

an easy way is to not use px. use REM or VW, or other relational size to the viewport

 

[Luke247]

an easy way is to not use px. use REM or VW, or other relational size to the viewport

Will you please tell me how to implement this? so I can have the text size change? Is it a code I would enter into the post?... or elsewhere?

 

[Nicolas FR]

Change 26px by 1.5rem for example. Try several examples untill the perfect size.

 

[Luke247]

Change 26px by 1.5rem for example. Try several examples untill the perfect size.

I am trying, but it doesn't work. For example, [size=1.5rem] test [/size]

 

[Nicolas FR]

Where do you try to change font size exactly ?
In the message body ?

You have to change that in ACP > Typo

 

[Luke247]

Where do you try to change font size exactly ?
In the message body ?

You have to change that in ACP > Typo

Yes, I'm trying to make the text in the message body responsive. You can change the font size with (open bracket) size=36px (then closed bracket) for example. Trying to figure out how to do it with rem or vw as mentioned above...

 

[Jeremy P]

I've written a bit on how you might accomplish this here:

XF 2.1 - Any chance to auto enlarge the font size on mobile views?

It seems the font size is all consistent through all kind of views. It would be great if texts of bigger size will be adopted whenever a mobile view is invoked.

xenforo.com

 

[Luke247]

I've written a bit on how you might accomplish this here:

XF 2.1 - Any chance to auto enlarge the font size on mobile views?

It seems the font size is all consistent through all kind of views. It would be great if texts of bigger size will be adopted whenever a mobile view is invoked.

xenforo.com

Thanks. Let's say I manually set the font to 30px in the post by using size=30px. How can I have this change to size 18 in mobile?

 

[Nicolas FR]

You can't Imho...

 

[Luke247]

You can't Imho...

I've learned that practically anything is possible with the right coder.

It took 3 freelancers at freelancer.com to figure it out, but the 3rd got it. Cost me $15. Here is the code (line 18-21):

 

[mkucuksari]

Here is the code (line 18-21):

Thanks for sharing the solution codes

 

[briansol]

Just because it works, doesn't mean it's right.

I would consider this an anti-pattern.

Using the w3c supplied font scale using relative units is the better, standardized approach.

px should be avoided in anything responsive and throwing in a media query to remedy that is putting a band-aid on another band-aid.

core xf font sizing needs improvement, so it's not exactly your fault here and, hey, if it works, it works, but this should be addressed by XF in a future release IMO.