CSS: increase font-size in mobile responsive just changes line spacing

Question

I created a small blog app at patife.com

The default CSS behaviour is the mobile page. I want to have bigger fonts (everywhere) so that its more readable on mobile, and smaller fonts on the large display format. But wherever in the code i insert a different "font-size: xx rem", the font displayed on my iPhone remains the same size, just the line spacings get compressed or extended.

Again, what i want is: - mobile (default) behaviour: font size displays big - large screen behaviour: font size displays normal (1rem)

Current code without any font-sizes below

html {
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    margin-left:20px;
}

ol {
    margin-left:20px;
}

/* Obsessive compulsive behaviour: Nobody touch the borders! */
.page {
    line-height: 1.4rem;
    margin: 30px 30px 30px 30px;
}

/* MAIN STRUCTURE */
/* This is an ID because we only use it once and specifically*/
#header {
    width: 100%;
    z-index: 1;
    display: inline-block;
}

#title {
    float: left;
}

/* inside the header */
#meta {
    float: right;
}

/* This is a class because it will be used multiple times (2) */
.column {
    margin-top: 15px;
    display: inline-block;
}

/* first column */
#entries {
    float: left;
    width: 100%;
}

/* second column */
#navigation {
    display: inline-block;
    float: left;
    background-color: beige;
    width: 100%;
    text-align: left;
}

/* ENTRIES */
.entry {
    display: block;
    margin-bottom: 20px;
}

.entry_title{
    font-weight: bold;
}

.entry_body{
}

.en {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0px;
}

.pt {
    float: left;
    width: 100%;
    margin-left: 0px;
    font-style: italic;
}

p {
    margin-top: 1.4rem;
}

.entry_category{
}

.entry_footer{
    width: 100%;
    clear: both;
    color: lightgrey;
}

/* FORMS */
.form_title{
    float: left;
    width: 100%;
}

.form_field{
    float: left;
    width: 100%;
}

.form_input_big{
    width: 100%;
    height: 30rem;
}

.form_button{
    display: block;
}
/* TEXT */

#title a {
    color: rgb(38, 38, 38);
}

a:link {
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

a:visited{
    text-decoration: underline;
    color: blue;
}

.flash{
    color: red;
}

@media (min-width: 63em) {
    .en {
        width: calc(48% - 15px);
        margin-bottom: 0px;
        margin-right: calc(15px + 2%);
    }

    .pt {
        width: calc(48% - 15px);
        margin-left: calc(15px + 2%);
    }
}

It smell like a browser auto scale to me, rather thanCSS. Have you put <meta name="viewport" content="width=device-width, initial-scale=1"> in your <head> ? — AVAVT
Yes, iphones usually use a wider view port and zoom out as a "smart" way to achieve natural look. — AVAVT
that was the right answer!! thanks man! edited or thanks girl — Humberto

Humberto Humberto · Accepted Answer · 2016-03-12T18:25:32

So the comment from @AVAVT was the answer. The problem is that the browser was forcing the regular desktop view zoom.

There's two answers for this:

a CSS implementation of the viewport meta
the html short-fix implemented by apple

from http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

CSS: increase font-size in mobile responsive just changes line spacing

1 Answers