Ever had a web page that looks amazing on screen but turns into a complete mess when you hit Print or Save as PDF? In this episode, we walk through exactly how to fix that — live, from diagnosis to solution.

We take a real client proposal built as a single-page HTML site (with accordion sections, animated transitions, CSS gradients, the works) and tackle the challenge of making it print cleanly as a professional, page-by-page PDF. The kind you'd actually send to a client.

What we cover: why web pages break when printed (missing @media print styles, CSS transitions interfering with layout, max-height accordion patterns collapsing content), how to use Chrome DevTools to emulate print media and diagnose issues, writing @media print CSS from scratch including page-break-before, page-break-inside, and page-break-after to control exactly what lands on each page, scaling and compacting content (fonts, padding, table rows, grid gaps) so dense sections fit on a single printed page without losing readability, dealing with hidden interactive elements like accordion panels that use max-height: 0 and overflow: hidden (a sneaky gotcha that makes entire sections disappear in print), and how to selectively show or hide elements in print vs. screen (like making a form visible in PDF that was previously print-hidden).

The result is a 15-page print-ready proposal where every section — from cover page to service breakdowns to pricing comparison to acceptance form — lands exactly where it should.

If you build web proposals, landing pages, or any content that clients need to print or export as PDF, this one's for you.