PDF Formatting Broken? Why Chrome Ruins Webpage Layouts (And How to Fix It)

TL;DR

Chrome's Print to PDF breaks modern CSS layouts (flexbox, grid, sticky elements), adds unwanted headers and footers, and clips wide content. This happens because Chrome's print renderer uses a different rendering mode than the screen. Fix it with Convert: Web to PDF, which uses Chrome's DevTools Protocol for higher-fidelity rendering plus element removal and layout control.

Why Chrome Print to PDF breaks formatting

When you press Ctrl+P and select "Save as PDF," Chrome does not simply take the page as you see it and put it in a PDF. It switches to a completely different rendering mode — the print media context. Here is what changes:

The print stylesheet takes over

CSS has a concept called media queries. Most websites define different styles for @media screen (what you see in the browser) and @media print (what gets printed). Many websites have minimal or broken print stylesheets, which means:

• Background colors disappear (print stylesheets often remove backgrounds to save ink)
• Layout shifts from multi-column to single-column
• Navigation elements may appear or disappear unpredictably
• Font sizes change
• Some elements are hidden, sometimes including content you wanted

Flexbox and grid layouts break

CSS flexbox and grid are the backbone of modern web layouts. Chrome's print renderer handles them differently than the screen renderer:

• Flex containers may collapse or overflow
• Grid areas may overlap or stack incorrectly
• gap properties may not render the same spacing
• Responsive breakpoints may trigger differently at the print page width

Sticky and fixed elements repeat

Elements with position: fixed or position: sticky are designed to stay in one spot on screen. In print mode, they often:

• Repeat at the top or bottom of every PDF page
• Overlap with the actual content
• Create blank spaces where they would normally float

Navigation bars, cookie banners, and chat widgets are the most common culprits.

Content gets clipped

If a page is wider than the selected paper size, Chrome clips the right edge. Tables, code blocks, and wide images are frequently cut off. There is no automatic scaling or horizontal scrolling in print mode.

Headers and footers are forced

Chrome adds the page title, date, URL, and page number as headers and footers. Unchecking "Headers and footers" in the print dialog removes all of them — including page numbers. You cannot selectively keep some and remove others.

How to fix specific formatting problems

Problem: sidebar overlaps main content

Cause: The page uses a flexbox or grid layout with a sidebar. In print mode, the layout collapses and the sidebar content overlaps the main content.

Fix with the extension: Use Convert: Web to PDF and remove the sidebar element before converting. The main content column expands to fill the page.

Problem: navigation bar on every page

Cause: The nav bar has position: fixed or position: sticky. The print renderer places it on every page.

Fix: Remove the nav bar using element removal before converting.

Problem: wide table is cut off

Cause: The table exceeds the page width at the current paper size and orientation.

Fix: Switch to landscape orientation. If still too wide, use a larger paper size (A3, Ledger) or reduce the scale to 70-80%.

Problem: images missing

Cause: Images use lazy loading and have not been loaded into the DOM yet.

Fix: Scroll through the page to trigger lazy loading. Use the "Load Images" button in the extension.

Problem: background colors missing

Cause: Chrome's print mode removes background colors by default.

Fix: In Chrome's print dialog, check "Background graphics" under "More settings." The extension's DevTools Protocol approach preserves backgrounds by default.

Problem: page breaks in the middle of content

Cause: Chrome's print renderer places page breaks based on paper size without considering content structure.

Fix: The extension gives you more control over margins and scale, which affects where page breaks fall. Adjusting scale slightly can move a page break to a more natural position.

Problem: fonts look different in the PDF

Cause: Some web fonts do not embed properly in the print rendering context. The browser falls back to system fonts.

Fix: The DevTools Protocol approach used by Convert: Web to PDF generally handles font embedding better than the print dialog. If fonts still look different, the font may have licensing restrictions on embedding.

The DevTools Protocol difference

Chrome's DevTools Protocol generates PDFs differently than the print dialog:

• It captures the page closer to the screen rendering rather than switching to print media context
• Background colors and images are preserved by default
• The rendering is more faithful to what you see on screen
• You get programmatic control over paper size, margins, scale, and header/footer options

This is why a dedicated extension produces better output than Ctrl+P — it uses a fundamentally different PDF generation method.

Side-by-side comparison

Layout fidelity:

• Chrome Print to PDF: Uses print media context — often different from screen
• Convert: Web to PDF: Uses DevTools Protocol — closer to screen rendering

Background colors:

• Chrome Print to PDF: Removed by default (opt-in via checkbox)
• Convert: Web to PDF: Preserved by default

Sticky/fixed elements:

• Chrome Print to PDF: Repeat on every page
• Convert: Web to PDF: Can remove before converting

Wide content:

• Chrome Print to PDF: Clipped at page edge
• Convert: Web to PDF: Scale control + paper size options

Headers/footers:

• Chrome Print to PDF: All or nothing toggle
• Convert: Web to PDF: Independent control

Element removal:

• Chrome Print to PDF: Not possible
• Convert: Web to PDF: Click-to-remove with undo

Cost:

• Chrome Print to PDF: Free (built-in)
• Convert: Web to PDF: Free

Frequently asked questions

Why does my PDF look different from the webpage?

Chrome switches to a print rendering mode that applies different CSS rules. Backgrounds disappear, layouts change, and some elements are hidden. A DevTools Protocol extension like Convert: Web to PDF renders closer to the screen version.

Can I keep background colors in Chrome Print to PDF?

Yes, but you have to enable it. In the print dialog, click "More settings" and check "Background graphics." This is off by default.

Why does the navigation bar appear on every page?

Fixed and sticky positioned elements repeat in the print rendering. Remove them before converting using a dedicated extension.

Is there a way to fix page breaks?

There is no precise page break control in Chrome's print dialog. Adjusting margins, scale, or paper size shifts where breaks occur. The extension gives you more control over these parameters.

Bottom line

Chrome's Print to PDF was designed for a simpler web. Modern layouts with flexbox, grid, sticky elements, and lazy-loaded content break it regularly. Convert: Web to PDF uses Chrome's DevTools Protocol for better rendering fidelity, plus element removal and full layout control. Free, local, and the fix for every formatting problem Ctrl+P creates.