I have a site and when I look at it on a mobile device the font sizes remain the same. Is there a way to scale the fonts or set a different size for rendering on mobile.
The URL of the Site is www.andywraight.com.
Evertything is fine on PC but the font siz could be doing with being about half the siz it is on mobile devices.
Joomla Version 3.9.25
Helix Ultimate Framework 1.1.2
You don't have to override font-family for mobile view. Just reduce font-size and line-height. font-weight - only if you really do not need bold.
I cannot teach you here CSS, but inside my code just add extra line for < h1 > with span used on home page :
@media (max-width: 580px) {
body, p, li {font-size: 17px;}
h1 span {font-size: 21px; }
}Hi,
yes, possible - but it request using extra CSS for mobile view only.
@media (max-width: 580px) {
body, p, li {font-size: 17px;}
}you can also more html tags with font size etc.
Thank you, I shall give that a go and see how I get on
ok I have added the following into the Custom Code/Custom CSS in the template
@media (max-width:580px) {
h1{font-family: 'Raleway', sans-serif;font-size: 30px;font-weight: 400;font-style: normal;}
}
When I l;ook in the page source at www.andywraight.com i see
@media (max-width:580px) {
h1{font-family: 'Raleway', sans-serif;font-size: 30px;font-weight: 400;font-style: normal;}
}
body{font-family: 'Raleway', sans-serif;font-size: 24px;font-weight: 400;font-style: normal;}
h1{font-family: 'Raleway', sans-serif;font-size: 75px;font-weight: 400;font-style: normal;}
I can see the line I want to override. But it does not seem to have done it.
Kenny
Awesome, thanks. Its working Now
Kenny