Leprosy Leprosy - 5 months ago 18
CSS Question

Same CSS in Mobile & Desktop with different margins/paddings

I have a site where the paddings and margins are shown differently between devices. I have screenshots of the same site in an Android device and in my desktop PC:

Site in the mobile device:

Mobile

Desktop resized:

Desktop, resized

Here is the CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


/* Diario */
* {
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}

body {
font-family: Arial, sans;
font-size: 0.9em;
background-color: #ccc;
}
h1 {
font-weight: bold;
font-size: 130%;
margin-bottom: 0.5em;
}

#page {
}
#page header {
font-weight: bold;
padding: 1em;
color: #fff;
background-color: #000;
}
#page footer {
color: #fff;
background-color: #000;
text-align: center;
padding: 1em;
}

#page article {
padding: 1.5em;
margin-bottom: 0.5em;
line-height: 1.2em;
background-color: #fff;
box-shadow: 0 0.2em 0.5em #000;
}
#page article p {
margin-bottom: 0.5em;
}
#page article p.meta {
font-size: 85%;
color: #999;
}

#big {
margin-bottom: 2em;
}
#big article {
}


#normal {
}
#normal article {
}

#normal article:last-child {
margin-bottom: 0;
}


And the HTML markup:

<!DOCTYPE html>
<html lang="es">
<head>
<title>El diario - <?php echo date('d-m-Y') ?></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="page">

<header>
<p>El diario - <?php echo date('d-m-Y') ?></p>
</header>

<section id="big">
<article class="main">
<h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
<p class="meta">Publicado hace 2 días</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

<article class="sub">
<h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
<p class="meta">Publicado hace 2 días</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

<article class="sub">
<h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
<p class="meta">Publicado hace 2 días</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

<article class="sub">
<h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
<p class="meta">Publicado hace 2 días</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>

<section id="normal">
<article>
<h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
<p class="meta">Publicado hace 2 días</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

<article>
<h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
<p class="meta">Publicado hace 2 días</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>

<footer>
(C)<?php echo date('Y') ?> Leprosystems
</footer>
</div>
</body>
</html>


Any ideas? I've searching for a similar issue, the only answer I've been found so far is to add the
-text-size-adjust: none;
piece of code, but it didn't make any difference.

Answer

After pulling my hair for days, the answer(simple, as usual with this kind of problems):

<meta name="viewport" content="initial-scale=1">

So, after kicking myself, I stablished a rule: ALWAYS use viewport metatag when developing with device compatibility in mind.

Comments