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

[gogo]

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.

 

[svaughn114]

Is it certain fields of text you want enlarged on a mobile device? I would think the easiest way would be through extra.less

 

[gogo]

Preferable all font sizes increased by 1 or 2:



How do I refer to these font sizes in extra.less?

 

[Jeremy P]

How do I refer to these font sizes in extra.less?

You can use @xf- followed by the name of the property, for example @xf-fontSizeNormal.

 

[gogo]

@xf-fontSizeNormal seems to be an invalid css element.

@xf-fontSizeNormal: 30px; changes nothing.

 

[Jeremy P]

It's not an element, it contains the value of the style property if you wanted to reference them in LESS. For example:

html
{
    font-size: @xf-fontSizeNormal;
}

Saying that, for what you're looking to accomplish it may be better to use rem font sizes in the style properties and then set your base font size on the html element accordingly (using media queries to make the base size larger on mobile). I haven't tested this approach though so YMMV.

 

[gogo]

I don't really get it.

If I want all font sizes in mobile view changed to that showing in red color, what should I do?

 

[Jeremy P]

I'm suggesting setting the font sizes using something like this in extra.less:

html
{
    font-size: 16px;

    @media (max-width: @xf-responsiveNarrow)
    {
        font-size: 18px;
    }
}

Then using rem units in the style properties. These units are proportional (multipliers) to the sizes set above:

Normal font size: 1rem
Small font size: .875rem
Smaller font size: .75rem
Smallest font size: .625rem
Large font size: 1.125rem
Larger font size: 1.25rem
Largest font size: 1.375rem

You'd need to adjust the base values and style properties to your liking, they don't quite correspond with what you've listed above. I think this is your best bet for accomplishing this though.

 

[gogo]

Your method is good. Thanks.