CODEWITHSUNDEEP
androidmobile-website
Dallas
Dallas

Reputation: 11

Mobile website text is messed up on Android devices

The text on my mobile site is "squishing" to the left. The rest of the site fills the page as intended. The text is wrapped in div elements, but it doesn't matter if I put them in divs or paragraphs, the outcome is the same. When I set a height on each element, it corrects the problem, but I'm trying to avoid that since there are a lot of paragraphs and they are all different sizes, not to mention future usability.

Here is an example and a screenshot:

On ALL the text elements, this happens, whether it's a ul, div, p, or header tags...

Also, it appears fine on older Androids and iPhones...

Any help would be appreciated.

Upvotes: 0

Views: 662

Answers (1)

Dallas
Dallas

Reputation: 11

I figured out the problem. I didn't set the "initial-scale" in the name="viewport" tag in the head tags.

The final tag that resolved the issue is 

<meta name="viewport" content="width=630px; height=device-height; initial-scale=0.5;" />

Thanks for all the input!

Upvotes: 1

Related Questions