I’m setting up a WordPress blog with both Facebook and native WordPress comments: http://lucky-stars.ca/yum/hello-world. I’m trying to get the formatting of the WordPress comments as close as possible to the Facebook ones. I’m almost there, but I’ve run into a strange problem.
On any first-level comment that wraps to display on multiple lines, it does not use the text size I’ve specified on the comment and comment author when viewed in iOS with a viewport size between 768px and 480px. Any comment that fits on one line (or has manual breaks that fit on one line) is fine, and when I look at it on my iPhone in portait orientation (<480px), the problem goes away.
This problem also appears underneath the comment form where it says “your email address will not be published…”
My font size specifications are on the div that contains all of my comments, #comments.
This is what I’ve tried so far:
- Clearing my cache.
- Adding
!importantto the font rule on#comments. - Tried both ems and pixels for the font size.
- Adding the size specification to the specific problematic divs (
.comment-authorand.comment-content). - Breaking down my font specifications into individual rules instead of shorthand.
- Checked that there are no font rules that would be overriding this under
@media screen and (max-width: 768px). - Adding
zoom:1to the#commentsafter I saw that Facebook’s comments did this. This fixed the problem when I was using Chrome’s User Agent and Device Metrics Overrides, but the problem persists on my iPhone.
I’ve tried googling the problem, but I’m not really sure what I’m looking for here since it’s only a problem when the text wraps. And not just on text that wraps, but on the author’s name as well, even though it’s a separate div.
Any direction would be appreciated, I’m completely at a loss.
Adding this to my CSS fixed the problem:
html {-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
Got this from https://github.com/necolas/normalize.css/blob/v2.1.2/normalize.css