Figure layout optimizations still necessary

[ludwigschubert]

Hi authors, one step before publishing that is often overlooked is responsive design for viewing on mobile. We won't ask you to recreate your figures in a responsive manner, but we do at the least require that figures can be scrolled if they don't fit on a display. When I enabled this on your article I noticed that many figures were actually overflowing their containers. I can fix this to my judgement, but I'd prefer if you went in and assigned container sizes for figures that you consider correct.

Here's an example of the kind of behavior I mean:

When setting overflow-x: scroll—which is needed to allow scorlling on mobile devices—diagrams like these would still overflow their container and have to scroll even on desktop. Please let me know if you need additional help setting correct container sizes. :-)

[grtlr]

Ping @RKehlbeck

[RKehlbeck]

Hi Ludwig,

I created PR#36 and tried to improve the responsiveness of the article, maybe you could have a look? Instead of using of using overflow-x: scroll figures are either scaled so that they remain inside the text width or split and create a new row. What do you think?

[ludwigschubert]

Hi @grtlr @RKehlbeck ! (very sorry for my radio silence on this—I was OOO until today) @RKehlbeck that's a great approach, much better than scrolling! The changes are a great start, but I'm afraid they don't fix most of the issue when I try to view the article on a mobile device. You may not have seen these issues if you didn't add the following meta tag to allow fully responsive sizing:

<meta name="viewport" content="width=device-width, initial-scale=1">

I've added that meta tag to the repo, and screenshotted some of the overflows I saw:

Hero diagram:

Figcaption of covariance matrix diagram:

Marginalization diagram:

I'm sorry these changes are so much fiddly work—we currently do the same in our own articles, though, just a combination of CSS grid, flexbox, or media queries if nothing else works simply enough.

[ludwigschubert]

One option to avoid extra work on the diagrams is to set a minimum device width and ignore the user experience on mobile devices. (In that case I'd still prefer the overflow scroll solution as it at least allows the text to be read easily.)

I'm happy to put the article live as soon as you make a decision about how to handle these.

[RKehlbeck]

Hi Ludwig, Thank you for the feedback. I did indeed miss that! In that case, we decided to go back to using xScroll if the width becomes too small. Maybe you could have a final look-over? Otherwise, we are good to go!

[ludwigschubert]

@RKehlbeck Thanks; had a look, added some padding in a very visible spot on the hero diagram. I think we can go ahead and publish tomorrow morning! :-)