Ask Anvil

Your page looks fine in the browser, but the PDF shows the stacked, narrow, mobile version. The layout is not broken. The PDF is simply being laid out at the paper's width, so your mobile media queries match.

The fix: give the PDF a wider page

Set an explicit page width on the PDF call instead of a paper format such as A4. This Playwright example uses a 1280px wide page:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/report');

  await page.pdf({
    path: 'report.pdf',
    width: '1280px',
    height: '1800px',
    printBackground: true,
  });

  await browser.close();
})();

The same page that picked the mobile layout at A4 picks the desktop layout at 1280px, because the width media queries now see a 1280px page.

Why it happens

When Chromium prints, it lays the page out at the paper width, not at your browser window width. A4 is 8.27in wide, which is about 794 CSS pixels (96px per inch), and US Letter is 8.5in, about 816 pixels. Any rule such as @media (max-width: 900px) matches at those widths, so the mobile rules win. Playwright's docs also note that page.pdf() uses the print CSS media type, so rules inside @media print apply too.

Other ways to fix it

If you would rather keep a standard paper size, add a print stylesheet that forces the desktop layout, for example by putting the desktop rules inside @media print or lowering your breakpoints.

Caveats

A custom page width produces a non-standard paper size, so printing it on A4 or Letter will scale it down. Also pick a height that fits your content, or the content will paginate at that height.