Different font size for desktop and mobile

[hollyboy]

Hi, the default font size is too small for desktop.
How can I increase is for desktop and also increase a bit the mobile version?
I am referring to both homepage font and postbit

Please help

[glennrocksvb]

Changing the font size in the body_font stylevar in the Style Variable Editor in AdminCP will apply on most of the text across the site on both desktop and mobile.

[hollyboy]

Thank you but I want a different size for mobile and another for desktop
thanks

[glennrocksvb]

Add in css_additional template.

body.l-small {
    font-size: 16px;
}

[hollyboy]

Add in css_additional template.

body.l-small {
font-size: 16px:
}

And for mobile?

[glennrocksvb]

That's for mobile. For desktop, just change the body_font stylevar.

[hollyboy]

sorry but I have used your code and nothing changed on my mobile

[glennrocksvb]

Post a link to your site for me to look at.

[glennrocksvb]

Wait, I found a typo on the CSS code. I used colon instead of semicolon. I have corrected the code in post #4.

[hollyboy]

unfortunately it only changes the sidebar in mobile
Please check www.interfans.org

[hollyboy]

glennrocksvb hi man, can you help more please?

[glennrocksvb]

As I mentioned earlier adding the CSS code I suggested will affect most of the text. For others not affected, you would have to add more CSS. It would be time consuming for me to do this all for you. But this video tutorial from vBulletin can teach you the techniques on how to customize styles using stylevars and css_additional template.

Click the link below then scroll down to Using Firebug to Find and Edit StyleVars video.

[glennrocksvb]

It doesn't have to be using Firebug as shown in the video. You can also use Chrome inspector tool if you are using Google Chrome browser by right clicking and choosing Inspect. To customize the style for mobile only, prefix the CSS selector with .l-small class. For example, to increase the font size for Forum Category header on mobile:

[COLOR=#FF0000].l-small[/COLOR] .forum-list-container .category-header .category {
    font-size: 20px;
}

You also need to use the browser's mobile emulator tool in order to quickly view and inspect your site on mobile using the desktop browser. Click link below on how to use this tool.

[hollyboy]

so glennrocksvb forum title should be:

.forum-title.l-small {
font-size: 20x;}

[hollyboy]

I have also added:

.forum-title {
font-size: 28x;}

to change forum title, but it does not work on my forum http://www.interfans.org/forum/
any reason? glennrocksvb

[glennrocksvb]

I'll check when I get to my computer.