How can I check CSS on printing?

Melody Scott
Melody Scott used Ask the Experts™
on
Hi, on our category pages. there's a big gap after each row when we print. How do I track that down? Does google chrome have tools for that? Thanks!!

https://www.magickitchen.com/menu/MK-meals-lowfat.html

Capture.JPG
Update: I've discovered Chrome rendering, and it has helped a bit, but here, where I'm working with it, I still only get two rows per page: http://dev.magickitchen.com/menu/MK-meals-renal.html
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Consultant & Challenge Subduer
Top Expert 2009
Commented:
Two reasons. This appears several times:
<!-- =================  PRINT ONLY PAGE BREAK every 6 items =========================== -->
<p style="page-break-before: always">&nbsp;</p>

Open in new window

Also there's a rule within a print media query in styles.min.css that's giving a fixed height to ".search-results .results .result".

Author

Commented:
Hi- that did it.. I would love to find a way to only break after the price, any advice on that? Thanks again,
Hi,

Unfortunately page break css are very hard to use as they are not always working ok in all browser...

https://css-tricks.com/almanac/properties/p/page-break/
(available options) so for after use page-break-after

page-break-after  : auto | always | avoid | left | right
page-break-before : auto | always | avoid | left | right
page-break-inside : auto | avoid


Some are using break-after instead of page-break-after

Don't waste too much time on this...

Here is what I usually use:

page-break-inside: avoid !important;
page-break-before: auto; 

Open in new window

Author

Commented:
Thanks!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial