Ha! I should have said the technique works. I'd obviously want to lay things out a little smaller on phone screens. Though, for that particular use, is just punt and say not supported on smaller screens.

Note, I couldn't just do an image because of the animation nonsense I was playing with.

Edit: though, oddly, I think you are really complaining about some of the styling I inherited from org. I can possibly fix that easily enough. Never tried. Pretty sure I can just swap out a "width" with "max-width" and things will reflow as desired. For my eyes on my phone, the current width was fine. I didn't bother checking why it killed reflow. But I can confirm it reflows as desired on desktop if I do that.

Sure, max-width will restore reflow, but now your code listings and images break out of their container: https://i.imgur.com/utCVxg1.png

My point is that absolute positioning/pixel perfect designs are easy because they solve a simplified project "How to have my content look correct at a fixed size". But it breaks down once that fixed size is no longer reasonable for the target device.

Right, I agreed that what I did would not scale down to small screens. Nor will it work if you ever try and display on an apple watch or some such. The max-width would have just given you flowing text. I fully expect the visualization to be broken on small sizes.

I contend that is just not a requirement for most things. This particular endeavor mine, included.

So, what point are you arguing against? If it was that I pitched this strongly as a panacea. I definitely concede it is not one. But I also don't believe in panaceas.

If if it is that there is an easier way to get that layout such that I can play with it in silly animations without absolute positioning, I'm game to see it.

Edit: I should say thanks for getting me to look at my own site again in a long time. The code block would need the same width->max-width flip. Though, I question on why anyone would look at that page... well, ever, first. But in general even on a small screen. Not sure what I want code blocks to do there. Will take another look sometime hopefully this weekend. :)

Went ahead and flipped both of my "width" overrides to "max-width". Amusingly to me, the worst part of the pages, now, it seems is the MathJax stuff. That said, I'm not seeing an obvious difference in my mobile firefox, just chrome. Still not entirely sure how I would even want these to look there. If you have a good pointer for a site that styles code decently on mobile, I'd love to take a look and see about emulating/stealing.