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

Three things change at once, which is why the result can be surprising in three unrelated 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 whatever it picks decides which version of the site you get. That is why a page saved to PDF sometimes comes out looking like the mobile site — the rendering width fell into the mobile range.

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 is usually an improvement — that is what it is for — but it means the PDF is deliberately not what you were looking at. If a menu or a sidebar you wanted is missing, this is why, and it was the site's decision.

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 height runs out — through a heading, through a table, through 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 lazy-loaded — images below the fold, content that appears on scroll — has to have actually appeared before the snapshot is taken, 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.

Consider what you actually want. If it is the text of an article, the print stylesheet result is usually cleaner than the screen. If it is evidence of what a page looked like, a screenshot is a more faithful record than a PDF, because it does not re-render anything.

After the fact

HTML to PDF gives you the document; anything left over is easier to fix in the PDF than to fight in the browser. A leftover banner or a stray element can be covered with whiteout in the editor, and a very heavy page — they often are, because of images — is worth putting through Compress PDF before sending.