CODEWITHSUNDEEP
htmlcssmobilebrowser
Rvervuurt
Rvervuurt

Reputation: 8963

CSS Font-size not working properly on mobile device

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 desktopDesktop with 1em And on my iPhoneiPhone with 1em

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: iPhone with 10em

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

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

Upvotes: 13

Views: 30502

Answers (4)

v-andrew
v-andrew

Reputation: 24191

Try css property text-size-adjust to scale text on mobile devices. Something like:

nav {
    text-size-adjust: 200%;
}
nav ul {
    text-size-adjust: 300%;
}
nav h1 {
    text-size-adjust: 400%;
}

Upvotes: 0

naresh kumar
naresh kumar

Reputation: 2241

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)">

Upvotes: 31

awolfe76
awolfe76

Reputation: 245

Go back to using the li for you navigation.

Then set the font-size to something acceptable (14px or 16px).

Then, in your css, use media-queries.

@media (max-width: 480px) { // will only happen on viewport less then 480 pixels (mobile)
  li {
    font-size:18px; // larger font (or whatever you want to do
    padding: 20px; // can even increase your padding
  }
}

Upvotes: 0

davo2323
davo2323

Reputation: 1

I see a couple things I think can help your situation. Semantically, you don't want to use <h1> tags in your menu list at all. Remove those tags and apply the styling to the nav li css style and adjust the padding accordingly. Also, just a recommendation, but I've heard from a few websites that the ideal mobile font sizing is pt.

I hope this helps.

Upvotes: 0

Related Questions