Mobile Font Size
Kenneth Robb
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
Paul Frankowski
Accepted Answer-
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; }
}- I strongly recommend reading a book about CSS.
Paul Frankowski
Accepted AnswerHi, 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.
Kenneth Robb
Accepted Answerok 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