CSS for styling the PDF

Replies: 0

I am trying to change the styling of the PDF, and I’m literally pulling my hair out. Some rules are working just fine, others do not work at all. For example: I gave the background a gradient. Works great. However, my rule for the font-family seems to do nothing at all. For some reason or another I can’t change the size of images. They always show in full size. Uploading smaller images results in very blurred images in the PDF.

First, I checked the size using the browser print function. It worked just perfect. However, this CSS didn’t work at very good when using for the plugin. Don’t get me wrong: It works, but it seems erratic what works and what not. Please, see my CSS. It is a mix of different units, since I tried to find out what works and what not:

body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20pt;
    color: #636466;
	background: linear-gradient(to bottom, #B1DDDE, #E2F2F2);
}

p {
    margin-bottom: 4pt;
    margin-top: 0pt;
    text-align: center;
}

.orange {
    color: #F47523;
}

.cert-header {
	margin-bottom: 20pt;
}

.cert-name {
    font-size: 42pt;
    font-style: italic;
	font-weight: bold;
}

.cert-title-1 {
    color: #F47523;
    font-size: 59pt;
    font-style: italic;
	font-weight: bold;
	margin-top: 15mm;
}

.cert-title-2 {
    color: #F47523;
    font-size: 42pt;
    font-style: italic;
	font-weight: bold;
}

.cert-title-3 {
    color: #F47523;
    font-size: 20pt;
	margin-bottom: 15mm;
}

.cert-footer {
	font-size: 14pt
}

.cert-badge img {
    width: 50%;
    height: 50%;
}

.cert-badge {
	margin-bottom: 15mm;
}

.cert-date {
	margin-top: 12mm;
	margin-bottom: 12mm;
}

sup {
	font-size: 15pt;
}