CSS Font-size not working properly on mobile device

Question

I'm working on a small project for school, where we have to incorporate html5 and css3. It's just in the begin stage now, as I'm trying to create two separate css-files for a mobile and a desktop version.

For the mobile version, I'm trying to get the menu to just show as a list, but with a bigger font. I can in no way get this working though.

This is the css for the menu:

nav ul {
    list-style: none;
    background-color: green;
    padding: 0;
}

nav li {
    border-bottom: 1px solid black;
    padding: 5px;
}

nav {
    margin-top: -36px;
    width: 100%
}

nav h1{
    margin: 0;
}

This creates the following on my desktop And on my iPhone

The font-size is set to 1em in the HTML in the top of the file. But 1em is not big enough for mobile devices, so I want it bigger, which seems impossible.

Even when I give the nav h1 a font-size of 10em, it doesn't get bigger than this:

While on my desktop it does work without a problem, there it looks like this:

The same problem occurs when trying to make the "blog posts" bigger, they just won't do it.

I normally have no trouble working with CSS, but this time I can't figure it out. Hope anyone can help! I have the feeling it's something very obvious.

Here is the complete CSS: http://snipt.org/zLic5

Here is the html: http://snipt.org/zLid2

Answer 1

i saw your html code. you are not adding any meta tag. certain meta tags are required, when you are developing mobile website,

for example you have to add -

<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<title>Welcome to your school name</title>

<!-- smart phone css  -->
<link href="assets/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />

<!-- Tablet -->
<link href="assets/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" />

<!-- Desktop -->
<link href="assets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)">