How to scale down page content to fit window.print()

Question

I have a problem with window.print function. I have a page that should fit A4 landscape page, but it doesn't. It looks like A4 page is not wide enough, so it pushes some of the content to the next page (I have 5 cards in a row, one of them is pushed to the second row). Is there any way to scale down the content without changing the width etc. of every object?

Answer 1

Of course!

You can use the print media query like this:

@media print {
    print-area *{ /* can be whatever CSS selector you need */
        transform: scale(x)
    }
}

where x is the size you want to scale down.