XF 2.1 How to make fonts larger on mobile devices such as phones?

[NealC]

I want to make it easier to read the forum when on a device such as my iPhone X. My normal font size in the style is 15px. I tried the code below in extra.less but I'm not seeing any changes. Any suggestions on how to properly go about this?

@media (max-width:@xf-responsiveWide){
    fontSizeNormal: 20px;
    fontSizeSmall: 18px;
    fontSizeSmaller: 17px;
    fontSizeSmallest: 16px;
    fontSizeLarge: 22px;
    fontSizeLarger: 25px;
    fontSizeLargest: 29px;
}

 

[djbaxter]

If you're trying to change it on mobile, @media shouldn't be for responsiveWide, should be responsiveNarrow, no?

 

[NealC]

If you're trying to change it on mobile, @media shouldn't be for responsiveWide, should be responsiveNarrow, no?

I think the using max-width will mean that width and narrower should be affected by the CSS. I use this same paradigm to hide ads on mobile and it works.

 

[Kirby]

fontSizeNormal etc. are not CSS properties but XF style properties so this won't work

 

[NealC]

Thanks, that occurred to me. How can I override the @xf-fontSizeNormal then in exta.less?

 

[Kirby]

Short answer: You can't.
If you areally wanted to do that, it would have to be much earlier.

And even if you did mange to do that, it would not give you the desired effect - it would just change the value everywhere.

If XF did use "CSS variables" (which it does not), this would be possible - but still not in extra.less.

 

[NealC]

Thanks, but yes, I'd wanted it changed globally. Effectively having font sizes when in mobile vs. not.

 

[Kirby]

No, you don't want to "change it globally" - you want to change it just for a certain media query condition.

Maybe others can come up/find a solution, unfortunately I don't see one (short of a lot of additional rules wrapped in a media query).

 

[NealC]

Yes, per media query, globally. Thanks again, hope there is a solution so we can control font size when responsive.

 

[arn]

This'll do it just for the post bodies. If you want you can find other places to increase size as necessary

@media (max-width:@xf-responsiveWide){
	.message-content {
		
font-size:20px;
		
	}
}

 

[ShikiSuen]

Another approach (you can tweak the percentage according to your preferences):

@media (max-width:@xf-responsiveNarrow){
   html, body{
      width: 115%;
      height: 115%
   }
}