unreadable on mobile

[jcbhmr]

problem: can't really be read on mobile.

Simulated iPhone 12 Pro	my real device
	

suggestion: on mobile:

1. add the <meta name="viewport" content="width=device-width, initial-scale=1" /> thing https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag to properly scal
2. don't do the side-by-side text/code on mobile devices (use flex-direction: row on desktop and flex-direction: column on mobile?)

here's a preview with <meta name="viewport" content="width=device-width, initial-scale=1" /> injected into the page:

something like this maybe?

note that denobyexample does this second thing where they break up the code with prose interspersed: https://examples.deno.land/parsing-serializing-toml

[jcbhmr]

after further searching of the issues, it seems like you don't want code split up:

Thanks for the suggestion and for making the effort to code up a prototype. Unfortunately I'm not going to make this change though. The site appearing like this on the phone is by design. One of the very foundational goals for the project is to always show entire working programs and to not break them up. I'm sorry since one could very disagree with that approach but that's what I've always wanted for this site. Sorry!

https://github.com/mmcgrana/gobyexample/pull/363

another idea that would keep with this idea while still making it readable on mobile would be to use two different tabs so you can flip-flop between them?

or alternatively a split-screen top/bottom instead of left/right?

or alternatively just keep it as source code & comments so that it's still a valid program just with the comments?

idk

[eliben]

On mobile I'd recommend reading it in horizontal view