Join GitHub today
Issue #730 - Content Sectioning - header #789
Thanks for the updates @a2sheppy , this looks great. But there are still some issues with the layout I think.
https://developer.mozilla.org/en-US/docs/User:wbamberg/HTML_editor_user_test_pages/datalist shows what the editor will look like in an MDN page. In that page, with a window width of 1440 px, the entire editor gets about 1000px of width, and the output pane gets about 375px.
At that width, the header is overflowing and getting cut off:
I think we should aim to have the examples work well at this width.
Of course it's possible that people will have a narrower browser window, and ideally it should work with that, too. The CSS examples switch mode from side-by-side to top-and-bottom with the editor at about 730px, which would give the HTML output window only about 260px. Having the layout work at that width is potentially quite hard to achieve, and if it's not practical then I think it's OK, but we should consider it.
I wonder if we could use flexbox to make the layout more responsive, like:
What do you think? (this also reduces the h1 font size because 3em will never fit)
Huh. I tested this thing like crazy and never had it get cut off at all. That's disappointing. Anyway, I was trying to avoid flexbox but agree it's probably the way to go here. I actually don't know why I was trying to avoid it, since it's sort of the "right" way to do this stuff. :)
I'll update and submit a revision shortly.