@media print callouts not respecting page break

[LSKY]

Hello everyone. Straight to the point: when exporting in PDF and the callouts are at the bottom of the page they should go on the next page due to my @media print rule:

@media print {
  div.callout {
      page-break-inside: avoid;
    }
}

But the top stays in the previous page as shown here:

Things I have tried

I’ve tried, unsuccessfully, giving the callout some margin on top in order to “push it down”, but it’s not what I’d want since all callouts, also the ones at the center of the page, would be affected.

I don’t know what else I could try since I’m not great at CSS. Thanks in advance for the help! : )

[woofy31]

I just tried it and it works just fine - maybe you have some other CSS snippet or plugin that conflicts with your code? Also, try using avoid !important' and see if that has any effect.

[EDIT: I just realized from your screenshot: it’s probably because the callout title is slightly shifted upwards - the callout respects the break rule, but the title is positioned higher than the callout hence why it results in the title probably not respecting the break rule]

[LSKY]

thank you for you answer!
yes, I checked and it’s because of the upward shift of the title, but I wouldn’t know how to fix it without changing the style of it… if any idea arises please let me know

[woofy31]

No problem - but I’d need to see the actual CSS code for that callout and its shifted title to see if there’s any way to deal with it…

[LSKY]

I wouldn’t know where to find the CSS for it… the shifted title comes from a plugin, Style Settings which I use with Minimal theme. I made a quick search but I can’t seem to find something useful, but maybe I’ve used bad keywords

[woofy31]

Style Settings is a general plugin where other plugins connect into to expose their own settings, so it’s not Style Settings per se, it’s another plugin or some other CSS snippet you have that connected itself into Style Settings… (and the Minimal theme doesn’t have those shifted titles as far as I know since I’m using it myself)

[LSKY]

Oh thank you, I thought Style Settings had its own stuff. Anyway, it’s not something from CSS snippets since deactivating all of them doesn’t produce any effect on the title shift:

I don’t think it’s from other community plugins, because I deactivated them as well and the callouts stay the same.

Could you check on “Settings > Style Settings > Minimal > Callouts” if you have this option?

[woofy31]

Yup, seems the shift comes from Minimal indeed… I couldn’t figure out any way to avoid breaking the title though The PDF export seems to ignore every margin or padding I add to the callout when it moves the callout to a new page to avoid breaking it…

You should either make sure to arrange your content so that callouts don’t end up being broken if you really need that look, or you can switch to a different callout style.

For it seems to be a PDF-rendering problem.

[LSKY]

Thank you very much for your time and patience, really appreciate it. I’ll see what to do, I may switch to “filled” callouts or maybe I’ll just be careful on their position in the page!