Menu icon Foundation
Blank pages when printing using print media query

I have a Zurb Foundation 5 site and everything is working fine except for the print media css.

When using "Emulate CSS media" in the Element Inspector for Chrome, it looks perfect, but when actually printing, there are several blank pages before and after the actual content. I've spent several hours to find the problem, but without any luck so far.

Hopefully someone can help me. An example page is: http://dev.zwedenweb.com/algemeen/ambassades-consulaten-en-verkeersbureaus/

Thanks in advance!

Kind regards, Jasper

printmedia queriescss

I have a Zurb Foundation 5 site and everything is working fine except for the print media css.

When using "Emulate CSS media" in the Element Inspector for Chrome, it looks perfect, but when actually printing, there are several blank pages before and after the actual content. I've spent several hours to find the problem, but without any luck so far.

Hopefully someone can help me. An example page is: http://dev.zwedenweb.com/algemeen/ambassades-consulaten-en-verkeersbureaus/

Thanks in advance!

Kind regards, Jasper

Jasper Metselaar over 4 years ago

Thank you so much, Tim!
Like you said, the problem was solved by moving the .hide-for-print.

You saved me so much time and frustration. Thanks again!

//Jasper

Tim Hartwick over 4 years ago

Very weird. i was able to emulate it in Chrome's inspector the first time I looked at it but I'm not able to recreate it! I do see the problem. I think if you move the ".hide-for-print" class up to the parent divs it looked like it did the trick.

That is pretty bizarre that the emulation stuff is a little off though. Let me know what happens!