Text Overlap on Low-Density Android Screens

TL;DR

• Onboarding text overlapped on low-density Android devices at 360 x 640 DP.
• Recent copy changes made it visible; the layout had always been fragile.
• A changed IP address was breaking translation file loading, muddying the diagnosis.
• Hardcoding the text isolated the layout problem from the loading problem.
• The flex container was the cause; adjusting padding and flex distribution fixed it.

Text overlapping on the Android onboarding screens, specifically on low-density devices.

Two problems at once

The confusing part was that a dynamically changed IP address was causing translation file errors at the same time. So text was both failing to load and failing to lay out, and the symptoms overlapped enough to look like one fault.

Separating them was the whole job:

1. Confirmed the device density at 360 x 640 DP — genuinely low, and the overlap only appeared there.
2. Fixed the server connection by updating the IP address, which cleared the translation errors and removed that variable.
3. Hardcoded the text to reproduce the overlap independently. With fixed strings, whatever remained had to be layout.

That third step is what made the rest straightforward. Debugging a layout bug while the content is intermittently missing is guesswork.

The cause

The flex container setup. Recent copy changes made the problem visible, but they didn’t cause it — the layout had always depended on the text being short enough to fit, and nobody had tested it at this density with longer strings.

Tweaking the CSS, focusing on padding and using flex to distribute space properly, resolved the overlap.

Worth remembering that a layout only works on the devices it’s been seen on. Low-density screens aren’t an edge case, they’re just a case nobody checked — and flexible design means the layout adapts rather than happening to fit.