Archived topic
Smaller font size on mobile
21 replies · Started by CRISTO on September 3, 2017
Hi Tom,
I took a while, but I was able to remove all the inline styles on the pages of my site (it was a beginner's mistake to use them in the first place). Still have a few posts to correct, then I am through.
So still not sure what to do next...use the css that Leo suggested? My site now uses 16 pt but I want the mobile to be smaller on small screen devices, perhaps similar to what TripAdvisor uses on their mobile verson.
Any suggestions?
You would need different CSS for different element (h1, h2, body etc).
My CSS will work for the body.
Feel free to link me to your site and specify which element you would like to change and I can provide the rest of the CSS.
Thanks, Leo. I did link it in my post....but here it is again. Not sure what the ideal size would be. Looking at the last 30 days, I have about 25k sessions, about half of them using mobile devices, about 10k on mobile devices (not tablets)
Accoriding to google analytics the top ones for small screens were 360x500, 380x550, 380x560, 320x460
Not sure if that tells you anything.
So on that page I see h1, h2 and p, so your CSS would be something like this:
@media (max-width: 768px) {
h1 {
font-size: 20px;
}
h2 {
font-size: 15px;
}
p {
font-size: 10px;
}
}
Thanks, Leo.....I will have to wait until tomorrow to try it out, but if you did it I am sure it will work out great!
Well, as usual, it worked out just as I wanted. The customer support you guys give is fantastic! Only thing I did was change the paragraph font size to 12 px, just a little bigger...looks great on my small samsung galaxy.
Forgot to mention.....if I did not have simple CSS, I would not have known how to implement this.
Glad it's working :)