Mobile theme issues

[refi64]

There were two issues I noticed on mobile:

• Opening the sidebar breaks the layout:

• Even with it closed, YouTube videos don't scale:

[refi64]

Code blocks also don't scale:

[JohnHardy]

Thanks for the issue report! Do you know what css we need to change in order to fix it?

[refi64]

For the first problem, IMO the mobile site looks better if you drop the margin-left off of page-main on mobile, which also "fixes" this issue. (The margins are also a bit wide, on mobile e.g. 44px would look a lot better. Right now, the content is rather thin.)

For the code blocks, overflow properties interact weirdly with flexbox, so the TL;DR is that you need to set min-width: 0 on your page-content element, which seems to pretty much magically fix all the code block scroll bars. This also "fixes" the video; it ends up weirdly thin, but you can work around that by dropping your custom width and height settings on its iframe. You could probably use media queries to only set a width if the display is big enough to fit it.