Websites jumbled on Xiaomi Redmi Note 10

Running a few websites now with Sparkle, excellent! … until I got a new phone, Redmi Note 10.

https://www.worthmatraversvillagehall.org/the-hall.html

…fine on iPads, desktops, iPhones, but crushed on the Note 10:

… I should add, any help much appreciated!

@worthmytravels, Is that an Android system?..

Yes, it’s Android, running MIUI 12.5.6

I’ll charge up my Android tablet and view it in mobile format and will get back to you…

Just one question… Have you automatically scaled the 320 device for mobile? instead of laying it out manually…

Not auto, it’s fully laid out manually and worked on iPhone no probs.

Give me some time to charge up my Android tablet and I can have a good look at it to give you feedback…

No hurry. It’s possibly something unique to the Redmi / Xiaomi MIUI but they have a rapidly expanding market share so I guess Sparkle needs to fit.

Hello.

So on my Samsung S20 smartphone the page looks good. But I have not tested and viewed everything.

What I would change is the hamburger menu at the top. I would put it in a group with box so it doesn’t overlap the text and images when scrolling.

Are there any settings to the display in the Xiaomi? Possibly a screen zoom that moves everything around?

Mr. F.

Thanks, that’s good to know. I’ll work on the hamburger!

I tried adjusting the text size setting, no change. No other zoom features on the Chrome browser.

Tried but I’m only picking up your text boxes running too short for the amount of text in them.

Thanks yes, that’s the problem, but on the Sparkle mobile layout pages there’s plenty of room for the text, as there is on other mobiles…

The problem is most likely Xiaomi is using a replacement font instead of the Times New Roman font you’re using for the body text, this is causing the text to break out of the text box. For best compatibility you should use a web fonts instead of a system font, this will ensure the font is exactly what you used in Sparkle.

1 Like

Excellent advice, thanks Duncan. They wanted an ‘antique’ style font … I’ll find a compromise!

1 Like