Archived topic
Mobile Layout Section Has Faded Text on Android Phone - OK on iPhone
9 replies · Started by Mary Pearson on July 26, 2021
Re my website, https://coviddisinfectant.ca section-10 (that starts with pink writing "Did You Know That Most 'Consumer' Disinfectant Wipes" ...)
On Android phones, just on this one section, the text, both pink and black, are so faded that it is hard to read. It is all good on iPhones, but on three Android phones I have checked, it is faded.
I tried changing themes and it did not solve the problem, so this is probably an Android issue, but I don't know where else to ask for support.
Could anyone give me some direction please.
Thank you.
Hi Mary,
I'm sorry I don't have an Android phone to test.
I checked the section, I don't see any suspicious CSS applied to that section.
Sorry, couldn't help more :(
Thank you Ying. I am the same. I don't have an Android phone to test either. I have to keep phoning people to ask them to check for me. ;-)
Hi there,
I checked the site on an android phone and it is definitely faded.
If I may suggest: Consider changing the font-weight on mobile from 100 to 300. I did some test and this weight seems to be the best compromise.
Interesting idea Elvin. Thank you. I will do this as a temporary fix, but am hoping to find the reason for the problem and resolve it properly. I just don't know where to go for support. Surely it can't be just an issue with my website.
Interesting idea Elvin. Thank you. I will do this as a temporary fix, but am hoping to find the reason for the problem and resolve it properly. I just don’t know where to go for support. Surely it can’t be just an issue with my website.
I'd consider playing around with other font-family as well along with their font-weight.
If possible, try not going below 300 as fonts are not created the same. Some typeface's "font-weight: 100" may be way thinner than other typefaces.
Actually I think the problem is with my site. I have been doing much playing around. I thought that perhaps if I put that section in a slider that it might look OK, but now I am having problems with the slider in that section. It is only taking up half the section. I tried putting in another duplicate of a slider that I have already created, but then nothing shows up in that space. I've tried putting it in a different section but again, nothing shows up. It is very strange indeed.
I have deleted all my custom CSS and functions.php but I can't get it to work, so I'm not sure what the problem is, but I think it is something to do with the website and not just an android issue as I first thought. I will keep plugging away to try to figure it out.
Further input would be greatly appreciated.
After you've deleted the CSS, did you purge cached CSS?
Make sure this is purged so the CSS being served for the page is latest CSS w/ the custom CSS deleted. :D
Thank you Elvin for all your help. I changed fonts, made them black instead of grey, bolded the pink titles, etc and my client is happy. He says it's 1000 times better.
You have some excellent ideas. Thank you again!!!!
That's good to know. And yes, that's good use of font-weight for heading. It improves the font heirarchy.
No problem. Always glad to be of any help. :D
