Twitter Widget ignoring font-size css on iPhone

Question

My website uses the Twitter widget to grab tweet and uses the "twtr-tweet-text" class to change the font family and size.

Unfortunately, on my iPhone (not on iPad) it seems to ignore the font size completely which causes it to overlap my footer. Looking closer it seems that the font-size is right for the 'reply retweet favourite' section but not for the actual tweet.

http://jshjohnson.com

How would I go about stopping this happening?

Thanks

Answer 1

The twitter widget has code that is setting the font-size in the linked widgit.css. I don't know if you have access to change to CSS within that file, but you can get more specific than the widget.css by targeting the div with your own style. You may have an ugly css rule but it's a quick and dirty fix.

If you can target this more specifically than the widget.css the rule should be applied. The following might work, if I'm targeting the text you had in mind.

div.twtr-tweet-wrap p {
    font-size: .75em; /* set whatever font size you want */
    ...
}

Anyway you have the idea, just find the div you want and get specific. You could check to see what the twitter css is doing here . If you really wanted you could try and match the rule and set the font-size to inherit , so only one font-size rule would have the specific size, to ease future adjustments.