How to center the entire notebook when embedded as an iframe?

Notebooks
1

Hello,

I have my notebook embedded as an iframe in a github static page:

Github static page

It would look better if the entire notebook can be centered rather than left aligned.

I tried to play with the HTML to no avail. Is there any way to center it?

Thanks.

2

You might have a look here: Substratum / Saneef H. Ansari | Observable ā€¦Saneef demonstrates how to pass styling parameters to embedded notebooks.

3

If you donā€™t mind having it centered while editing, then adding the following somewhere in your first Markdown cell should do the trick:

<style>.observablehq-root {margin: 0 auto; width: max-content; max-width: 100%}</style>
4

Hi, this solution doesnā€™t seem to work for me?

Notebook link: Untitled / Fangyi Zhu | Observable

Github page: https://fangyizhu.github.io/guerilla-ai/

1 Like
5

I suspect what you want to do is center the embed on the GitHub page? In that case, try this:

<body>
<iframe style="width: 600px; height: 2000px; border: none; margin: auto;  overflow: hidden; z-index: 999999; display: block;" src="https://observablehq.com/embed/e0f39b6f8dda005b"></iframe>
</body>
1 Like
6

There are a couple of issues:

  1. The first cell has to be the title cell, you shouldnā€™t place anything above it. You can paste the snippet into your already existing title cell.
  2. One of your plots has a fixed width of 1400px and expands the parent element (because its width is set to fit its content via max-content). Observableā€™s default CSS wraps text at 640px.
1 Like