CODEWITHSUNDEEP
htmlcssiphone
nthChild
nthChild

Reputation: 699

Non-Responsive Site Breaking on iPhone

I'm trying to style a non-responsive site. It looks great on desktop. On iPhones, the content and text breaks and overlaps. I do not have a viewport set, so I assumed it would just look like the desktop version but "zoomed out" or "tiny"... I don't understand why this is happening. Please be gentle. I'm feeling pretty burnt out today ;)

Here is an example of my issue: Desktop VS iPhone Example

*Edit: ceejayoz answered this, for some reason I can't find the "answered" button.

Upvotes: 0

Views: 36

Answers (1)

ceejayoz
ceejayoz

Reputation: 180147

Mobile browsers adjust text size to make it a bit more readable.

Unfortunately, it looks like you're using absolute positioning in spots, so this very helpful feature is blowing up a bit.

Putting -webkit-text-size-adjust: 100% in your CSS for those elements (or for the whole page, if you prefer) will prevent this automatic adjustment.

Upvotes: 1

Related Questions