Quote:
Originally Posted by joshua.kendrick
font-size: 15px;
|
That is the problem and is what DiapDealer suggested it would be.
You are using an absolute unit. This means the size will be 15 of whatever the device defines a pixel as. If you a relative unit, the device will resize according to that. I usually use "em" which is effectively the size of a character with the current font and font size. I would probably code your first three classes as:
Code:
body {
font-family: "book-antiqua";
font-size: 1em;
color: black;
background-color: white;
margin-top: 2em;
margin-bottom: 2em;
margin-left: 2em;
margin-right: 2em;
}
p {
color: black;
font-size: 1em;
font-style: normal;
font-weight: normal;
text-align: justify;
text-indent: 1.2em;
line-height: 1em;
}
h1 {
color: black;
font-size: 3em;
font-style: bold;
text-align: center;
line-height: 1em;
}
And a lot of those styles are overkill or duplicating the defaults. The way I would really code these is:
Code:
body {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
p {
text-indent: 1.2em;
}
h1 {
font-size: 3em;
font-style: bold;
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
On the Kobo devices, that would resize well. And I don't care to set the standard body font. I might set the heading font if I wanted something different and had something that fit the story.