Why does a web page look different when I save it as a PDF?

Three things change at once, so the result can surprise you in three separate ways.

1. The width is decided for you

On screen a page adapts to your window. Modern sites are responsive: at 1400px wide you get a three-column layout, at 500px you get one column with a menu button.

A PDF has a fixed width. The converter has to pick one, and that choice decides which version of the site you get. That is why a page saved to PDF sometimes looks like the mobile site: the width it used was narrow enough to count as a phone.

2. The site's print stylesheet takes over

Many sites carry a stylesheet that only applies when printing. It typically hides the navigation, the sidebar, the cookie banner and the adverts, and sometimes changes the type entirely.

This usually makes it better, which is the point. But it means the PDF is not what you were looking at. If a menu or a sidebar you wanted is missing, this is why, and the site chose it.

3. Content is cut into pages

A web page is continuous. A PDF is a stack of sheets. Something has to decide where the breaks fall, and unless the site says otherwise they fall wherever the page runs out: through a heading, a table or an image.

Sites that care set break-inside: avoid on the things that should not be split. Most sites do not.

Getting a better result

Let the page finish loading. Anything that loads late, like images further down or content that appears as you scroll, has to be on the page before the PDF is made, or it will be missing.

Expect the interactive parts to be dead. Video players become a poster frame. Accordions capture whatever state they were in. Maps become a static tile. There is no way around this: a PDF cannot run anything.

Deal with the cookie banner. If it was on screen it is often in the PDF, on top of the content. Dismissing it before capture is the only reliable fix.

Think about what you want. If you want the text of an article, the print version is usually cleaner than the screen. If you need proof of what a page looked like, a screenshot is a truer record than a PDF, because it shows the page exactly as it was.

After the fact

HTML to PDF gives you the document. Anything left over is easier to fix in the PDF than in the browser. You can cover a leftover banner or a stray element with whiteout in the editor. Web pages often make heavy PDFs because of their images, so put a big one through Compress PDF before sending.