CSS - Why does this print to 2 pages in Chrome?
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

On an car sales site, I have a button to print a vehicle details onto a single page. When you click the "Print on 1 page" button, it adds a CSS class to all non-essential parts of the page "hide" under the @media print rules.

In Firefox, this works perfectly, but in Chrome it prints a second empty page.
Are there any CSS/Javascript solutions to eliminate the extra page?

Sample URLS:



awarded to B44ken

Crowdsource coding tasks.

1 Solution

Winning solution

Maybe the reason why it won't print on one page is because of default padding styles? Whatever it is, you can hard limit to one page with this CSS:

@media print {
html, body {
overflow: hidden;

This worked great! I did it via javascript instead of pure CSS, but still a success! thank you!
Matt Connolly 8 months ago