As part of my quest to get bigger images, I'm getting some weird page breaks.
I tried simply adding
h3.stepTitle {
page-break-before: always;
}
But the pdf generation fails. HTML looks fine.
Ideas?
Some overlapping page-break-inside: avoid maybe?
Is this a good question?
Looks like you'll have to max out your .stepImages elements width (which, in turn, will limit their corresponding heights) at 401px in order to fit three images on the same page.
There are a ton of page-break-inside and page-break-after rules which makes the exact logic hard to follow. If you're really interested in squeezing every little pixel of height out of your images maybe try multiple columns as I think the issue is your .stepText rules are kicking in and thereby causing some of those page-break rules which is in turn causing your step title to get bumped up to the previous page.
Was this answer helpful?
Sure.
The issue was not to fit three images on one page however.
It was to fit the Title with the first image (and then the last image possibly overflowing.)
I'll compromise it together with your 2nd suggestion pdf Custom CSS - howto make all images same size?
and be done with it for now.
Thanks for the insight.
