As we all perfectly know, designers are narcissists.

Revamp project: Font sizes in mobile Safari

Today I found this odd little bugger in mobile Safari. I was writing the mobile-specific CSS sheet for the website I’m revamping, and it was all going smooth until I stumbled upon this annoying little <p> tag. The problem? I had specified the font size and properties for this little paragraph tag earlier in my document, which looked like this:

#my-short-paragraph { 
	font: bold italic 16px Georgia, serif; 
	text-align: left; 
	color: #3a8ede; 
	cursor: pointer; 
	margin: 25px 0 30px 10px; 
	-webkit-transition: color 0.2s ease-in; 
	-moz-transition: color 0.2s ease-in; 
	-o-transition: color 0.2s ease-in; 
	transition: color 0.2s ease-in; 

Nothing tricky going on here, right? A bold, italic Georgia font at 16px, with a blue color. Simple as that. But when I wrote the following CSS to make the layout for mobile browsers, I noticed that the font size did not change at all in mobile Safari. Not in iOS 4.0.2, not in iOS 4.1, nor in iOS 4.2.

@media screen and (max-device-width: 480px) {
	#my-short-paragraph { 
		font: bold italic 10px Georgia, serif !important;

I’m getting very used to adding !important rules while writing for mobile, since you kind of have to override the ”normal” style rules, but this didn’t matter. I tried lots of different variations, like font-size: 10px !important;, font: 10px Georgia, serif !important; and font-size: small;, but neither worked. It didn’t even work when I tried it this way:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	#my-short-paragraph { 
		font: bold italic 10px Georgia, serif !important;
		font-size: 10px !important;

At last, I was starting to get a bit frustrated, and cursed this paragraph’s font size sorcery. Then I thought, ”Let’s try declaring it with two different methods, then maybe Safari will take the hint and make the font smaller!”, and this is what I finally came up with:

@media screen and (max-device-width: 480px) {
	#my-short-paragraph { 
		font: bold italic 10px Georgia, serif;
		font-size: small;

It worked! It baffled me, but it worked! I didn’t need the !important rule any longer, but I had to declare the font size twice with two different methods – one time with px and one time with small. If I removed either declaration it wouldn’t work, regardless of any !important rules.

This problem might be very specific, but it was weird enough for me wanting to post it. I don’t know why this problem occurred, but here’s the solution either way.


Single Post Navigation


Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in: Logo

Du kommenterar med ditt Logga ut / Ändra )


Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )


Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

%d bloggare gillar detta: