"Fullscreen Layout Demo" notebook is broken

Site Feedback
1

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
2

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
3

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

4

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.

5

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: CSS layout: how to break the first column after N elements, and follow in the second column, just with CSS? - Stack Overflow.

6

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