Using custom CSS to fix layout issues in pdf caused by {% figuregroup %} shortcode?

[zsofiaj]

Hi everyone! I've been using custom CSS to fix layout issues in our pdf using the very helpful tips posted near the bottom of this page https://quire.getty.edu/docs-v1/multiformat-output/. However, I haven't had any luck fixing issues cause day the {% figuregroup %} shortcode. Has anyone had any experience using custom CSS to avoid extra white space and awkward breaks caused by the grouped images? I would be grateful for any advice or examples. Thank you!

[lucafalefoto]

I've tried to fix the problem myself, but no luck. Sorry.

[Erin-Cecele]

Hi @zsofiaj We were separately messaging over email so I want to make sure I post the fix for this issue here:

For the spacing issues in that first image of the group and the endnotes, they’re related to the same lines of CSS, the ones you found in the `quire-page.scss` file. And that turns out to be the best place to fix them. So open that file and look for these lines:
 
+ .quire-page__content p:first-child,
+ .quire-page__content figure:first-child {
  @media print {
    padding-top: 1.375in;
  }
}
 
And change them to:
 
+ .quire-page__content .content > p:first-child,
+ .quire-page__content .content > figure:first-child {
  @media print {
    padding-top: 1.375in;
  }
}

Thank you to @geealbers for helping to resolve this!