🏠 back to Observable

"Fullscreen Layout Demo" notebook is broken

The @mootari’s notebook: https://observablehq.com/@mootari/fullscreen-layout-demo is currently broken. I imagine something has changed recently in the Observable’s DOM.

1 Like

Thanks for pointing it out! Can you please check the update I just published?

Changes:

  • cell divs now have an additional wrapper below body
  • height: 100% on the wrapper would no longer work and needed to be specified as 100vh
1 Like

Thanks ! I fixed my notebook as well: https://observablehq.com/@severo/two-columns-layout-in-fullscreen-mode

I would advise against using float for columns. These days there are far better options, like display:flex and display:grid. Also, at least in my browser, the cell containing the “Side column” headline appear below the videos.

Oh, you’re right, the breakLayoutAtCell parameter was wrong :slight_smile:

For the layout, with my poor CSS skills I couldn’t find a better way of getting what I want, and I had no more luck asking on StackOverflow: https://stackoverflow.com/questions/60773748/css-layout-how-to-break-the-first-column-after-n-elements-and-follow-in-the-se.

It can be quite tricky to flow elements across columns without additional wrappers. For what it’s worth: display:inline-block can often be easier to handle.

1 Like