1. Images Are Missing or Broken
If your PDF exports with missing images, it is usually because the images are using relative paths (e.g., src="/images/logo.png") or are blocked by browser security policies.
The Fix: Use absolute URLs (e.g., src="https://example.com/images/logo.png") or embed images directly as Base64 data URIs.
2. CSS Styles Are Not Applied
Sometimes, your HTML preview looks great, but the PDF output is completely unstyled text.
The Fix: The converter might be struggling to load external stylesheets. Try moving your CSS into an inline <style> block in the head of your document, or use inline style="..." attributes on individual elements.
3. Awkward Page Breaks
By default, HTML converters will chop your document strictly based on page height, which can split tables, images, or paragraphs awkwardly across two pages.
The Fix: Use CSS print properties to explicitly control page breaks:
.no-break {
page-break-inside: avoid;
}
.force-break-before {
page-break-before: always;
}Apply the .no-break class to tables or image containers to prevent them from being cut in half.
4. The Layout is Too Wide
Web pages are designed to fill wide horizontal screens, while standard PDFs (like A4 or US Letter) are tall and narrow.
The Fix: Ensure your HTML container has a maximum width set. We recommend forcing a max-width wrapper of around 680px to simulate a standard printed page width.
Still having issues?
Try pasting your code into our HTML to PDF converter. It relies on a high-fidelity rendering engine that handles many of these edge cases automatically.