Media query problem: font size not changing on phones

Question

I am doing a page that font size 16px for computer desktop and 36px for small device such as iphone and other small phones. I set the

<meta name="viewport" content="width=device-width, initial-scale=1.0">

in the head area and use style:

@media (min-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */   
    p.Description {
        font-size: 36px;
    }
}

@media (min-width:481px) {
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    p.Description {
        font-size: 16px;
    }
}

@media (min-width:641px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    p.Description {
        font-size: 16px;
    }
}

@media (min-width:961px) { 
    /* tablet, landscape iPad, lo-res laptops and desktops */ 
    p.Description {
        font-size: 16px; 
    }
}

@media (min-width:1025px) {
    /* big landscape tablets, laptops, and desktops */ 
    p.Description {
        font-size: 26px; 
    }
}

@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    p.Description {
        font-size: 16px;
    }
}

Now I have problems - it works well on computer but not on iPhones.

Can you guys help me? What is wrong with it?

Answer 1

Simply remove the below media-query:-

@media (min-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */   
    p.Description {
        font-size: 36px;
    }
}

And instead of this, Add this:-

    p.Description {
        font-size: 36px;
    }

This will set the font-size to 36px. And as screen width reaches 481px, then due to other media query the font-size become 16px.

Overall the updated code is:-

/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
p.Description {
  font-size: 36px;
}

@media (min-width:481px) {
   /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    p.Description {
       font-size: 16px;
    }
}

@media (min-width:641px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    p.Description {
        font-size: 16px;
    }
}

@media (min-width:961px) { 
    /* tablet, landscape iPad, lo-res laptops and desktops */ 
    p.Description {
        font-size: 16px; 
    }
}

@media (min-width:1025px) {
    /* big landscape tablets, laptops, and desktops */ 
    p.Description {
        font-size: 26px; 
    }
}

@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    p.Description {
        font-size: 16px;
    }
}