Page break: avoid work

Question

I have a print style sheet for my (Wordpress) site, and I want the images to be printed on one page, and not distributed across pages. In some cases, even lines of text are split into pages. I included img {page-break: avoid;) in my print stylesheet, but no luck. I found a few previous answers, but they seem to be old.

Is there a reliable way to print a medium-sized image on one page and not split it into pages? Why do lines of text break on pages?

Website: http://74.220.217.211/housing-developments/grafton-townhomes/

Related posts:

• Print styles. How to ensure that the image does not occupy a page break

• What media are most useful = "print" specific browser-compatible CSS properties?

• How to make CSS to avoid page breaks?

• Page break doesn't work in Chrome?
• Crawl for page breaks: Avoid

Answer 1

Try the following:

 .site-container, .site-inner (heck body tag possibly) {position:relative;} p { page-break-inside: avoid; position: relative; } 

Tick ​​FIDDLE

Add this to your print media.

I just look at this in Chrome and it looks great, minus the image that also needs this:

 img { page-break-before: auto; page-break-after: auto; page-break-inside: avoid; display: block; } 

Finally, Wordpress has this, but is not really sure if this helps ...

  <!--nextpage--> 

Answer 2

I think the problem may arise from the position property of the elements. An element that you do not want to tear on the page and its parent should be declared as:

 position: relative; 

The rest of the code styles are correct and should look like

 @media print { img { page-break-before: auto; page-break-after: auto; page-break-inside: avoid; position: relative; } }