Website looking great? Did you check it on your phone? Or your iPad?

Sometimes buttons and things are bigger and ruins your layout etc. Whatever your issue is, you might not need a completely separate CSS file. You can override rules using this kind of thing:

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
 input[type="submit"]
 {
 height: 36px;
 font-size: 16px;
 }
}
/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
 input[type="submit"]
 {
 height: 36px;
 font-size: 16px;
 }
}

Easy as that!

Advertisements