CODEWITHSUNDEEP
jquery-mobile
ddouglascarr
ddouglascarr

Reputation: 1452

setting font-size in jquery-mobile

I am developing an app with jquery-mobile. (yes, and app, it'll run within cordova(aka phone gap))

On the nexus 7 (the target device for the app), The font displays for many things are way too small. I can barely read it and I'm young. Many of the users of this app will have poor eyesight.

Is there any simple way to change the font-size with jquery-mobile?

When I try to add entries in a custom css file, there are unexpected results (Formatting goes out, etc) I have also tried theme-roller, but that only allows you to change the font-family, not the font-size.

eg: 

body p {
font-size: 1.5em;
}

Even just a general explanation about how to write a css file for jquery-mobile would be very helpful.

Upvotes: 1

Views: 12027

Answers (2)

ddouglascarr
ddouglascarr

Reputation: 1452

OK, I've worked it out.

In the jquery-mobile-1.2.0.css file is the styling for query-mobile. You modify this stuff.

There's some cryptic info on the jquery-mobile website that will make sense once you've read this.

So, to change the font-size for

within all

  • you go to the jquery-mobile-1.2.0.css file and add:

    .ui-li p {
    font-size: 1.5em;
}

    It seams that most of the jquery-mobile elements have .ui- in from of their normal html tags. They have a special class or something. (If anyone wants to elaborate on this it'd be great.)

    Upvotes: 1

    • Juan G. Hurtado
    Juan G. Hurtado

    Reputation: 2137

    Setting global <body>'s font-size should be enough:

    body {
  font-size: 15px; // You can even use !important 
}

    Upvotes: 0

    Related Questions