Hi, I need help with the following-- hopefully simple -- issue:
When I convert a html file to epub in Sigil, the margins of the text remain fixed: the text does not reflow in accordance with the size of the screen; making the epub reader's window smaller will make e.g. the right half the lines invisible...
When opening the html file in Firefox, the issue is easily fixed by going to "view" and choose "no style" but how do I make this permanent in Sigil by editing the css? (I suppose).
My ultimate aim is to have the file in .azw3 format (as described
here) but I realize now that this is a basic epub issue. With no skills developed in editing the css properly (I tried!
), I am pasting the whole of it here:
body
{ color: black;
background: white;
FONT-FAMILY: arial;
FONT-SIZE: 12px}
A:link {text-decoration: underline; color: #800000}
A:active {text-decoration: underline; color: #800000}
A:visited {text-decoration: underline; color: maroon}
A:hover
{ text-decoration: underline;
color: #800000}
HR
{ width: 995px;
text-align: left;
margin: 0 auto 0 0}
H1
{ color: black;
font-size: 14px;
font-weight: bold;
font-family: arial}
H2
{ color: #000000;
font-weight: bold;
font-size:12px;
font-family: Arial}
.TOC
{ color: black;
font-size: 16px;
font-weight: bold;
font-family: arial;
text-align: center}
.sectionHeaderContainer
{ border-bottom: 1px solid #BFC6CB;
margin-bottom: 20px;
width: 100%}
.sectionHeader
{ font-weight: 700;
color: #555;
font-size: 0.9em;
text-transform: uppercase;
border:1px solid #c3c3c3;
background-color:#f0f0f0;
padding:0px 5px}
.pagetitlefooter
{ font-family:Arial,"Times New Roman",Times,serif;
font-size:12px}
.pagetitle
{ font-family:Georgia,"Times New Roman",Times,serif;
font-size:20px}
.subNavText, .subNavText a, .subNavText a:visited, .subNavText a:hover
{ color:#666666;
font-size:12px;
font-weight:400;
margin-left:5px;
text-decoration:none}
.tr_reg
{ background-color:#FFFFFF}
.tr_color
{ background-color:#EFF0F0}
.td_align
{ text-align: center}
.TD
{ FONT-FAMILY: arial;
FONT-SIZE: 12px}
.TITLE
{ FONT-FAMILY: arial;
FONT-SIZE: 18px}
#sddm
{ margin: 0;
padding: 0;
width: 995px;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: 14px arial}
#sddm li a
{ display: block;
margin: 0 0px 0 0;
padding: 4px 10px;
width: 80px;
background: #1B2E4C;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #B8882D}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #1B2E4C;
border: 1px solid #1B2E4C}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #1B2E4C;
color: #FFF;
font: 14px arial}
#sddm div a:hover
{ background:#B8882D;
color: #FFF}
.FILLER
{ display: block;
margin: 0 0px 0 0;
padding: 4px 10px;
width: 495px;
height: 24px;
background: #1B2E4C;
color: #FFF;
text-align: center;
text-decoration: none}
/* For pop-in notes */
.hiddennote {
display: none;
margin: 5px;
border: 1px solid #242e55;
background-color: #dde3ef;
padding: 2px;
}
*,html {
}
div.suggestions {
background-color: #fff;
border-left:1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
position: absolute;
}
div.suggestions div {
cursor: default;
padding: 0 3px;
border-bottom-style:solid;
border-bottom-width:thin;
border-bottom-color:#CCCCCC;
}
div.suggestions div.current {
background-color: #36c;
color: #fff;
}