CODEWITHSUNDEEP
cssmobile-website
Kornel William
Kornel William

Reputation: 77

Mobile CSS Best Practicies

What styles should I override/reset in mobile web? Is there any patterns similar to desktop web, when you set margin: 0; padding: 0; to any element from very beginning? Are there any consequences if I reset too many styles/elements?

Upvotes: 4

Views: 5834

Answers (1)

lsl
lsl

Reputation: 4419

If you really want a reset: Carrer blog has one: (github)

/* CSS Mobile Reset */
html, body
{
 margin: 0;
 padding: 0; 
 border: 0;
}

body 
{
 font-family:Arial,  sans-serif;
 line-height:1.5;
 font-size:16px;
 background: #fff;
 padding:5px;
 color: #000;
 word-wrap: break-word;
 -webkit-text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6{ font-weight: normal; }

p img { float: left; margin: 0 10px 5px 0; padding: 0; }

img { border: 0; max-width: 100%; }

table { width:auto; border-collapse: collapse;border-spacing: 0; }

Must read SO post on the matter. From Harpo:

How strongly do you believe in CSS reset for the desktop?

I tend to agree with those who argue that CSS resets are too heavy-handed (have you ever read one? I'd never heard of some of those elements) and that ultimately, hand-crafted rules based on your actual needs will be most predictable and efficient.

The mobile platform only makes bandwidth even more precious. I guess that's why you're asking. I'd say, whittle a standard reset down to what you really need.

If you're into Boilerplate: there is a for mobile option.

You may want to add some of its features to your own even if you don't use boilerplate.

Upvotes: 6

Related Questions