Getting Started

I’ve got my page rendering as print-preview, but I can’t get the @page rule working, to set the page size etc. I’ve followed your instructions at but you don’t say where this @page should be put. I’ve tried adding it to my hugo custom.scss file and also to your interface.css. Neither seem make it use my new page-size.
I want A4, but it is showing my site in A5.
I’ve got:
@media print {
.docs-sidebar, .no-print, .no-print { / Hide stuff in printouts. */
display: none;

  @page {
	  size: A4 portrait;
	  margin-top: 20mm;
	  margin-bottom: 20mm;
	  margin-left: 20mm;
	  margin-right: 20mm;
    break-before: page; /* don't insert blank left-page */

Hi @StephenJD!

The css you’re showing should work.
How did you setup pagedjs ?
Would you mind sharing your code for me to check how it’s made?




I’ve now included your theme in my in config.toml with

path = ""

The static pages are done by \layouts\document\single.html

This uses \layouts\partials\preview_book_simple_layout.html

that file has

{{ partial "pagedjs-header.html" . }}
{{ partial "print-button.html" }}

I have copied your print-button.html, but use your default pagedjs-header.html

My custom .css is \assets\css\print.css

You can see my website here:

The code is here:
Thanks for your help.