CSS: @media print & column-count not working at all

Question

I have a div with three vertical divs in it. Within these inner divs there are divs with the column-count CSS property (working well, see below).

The working part is this (for multiple sreen sizes) as an example:

@media only screen and (min-width: 1100px) {
.masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}
}

Could someone please tell me why the following code is not working when I try to print a page?

@media print {
.masonry {
    -moz-column-count: 2 !important;
    -webkit-column-count: 2 !important;
    column-count: 2 !important;
}
}

The @media print query is working with

@media print {
    body {
    display: none;
    }
}

for example.

I tried Safari and FF on Mac OS X.

Thank you!

score 1 · Answer 1 · edited May 23 '17 at 12:04

1

It's a known bug in Chrome

This link can be usefull for you:

This is a small refference that one user try:

Good luck

edited May 23 '17 at 12:04

Community

answered Sep 14 '15 at 10:01

But I didn't use Chrome? – alve89 Sep 14 '15 at 14:29
However you need to change the behaviour from flexbox to other technology (displays, tables, etc), to make it runs in printing. – Marcos Pérez Gude Sep 14 '15 at 14:41

1 Answers1