I can’t figure out the best way to control the width of the rendered content when embedding in another site. All the examples I’ve found online are on single-column sites where they allow the Observable content to render at 100vw. I have a multi-column site and need to constrain the rendered content to one column (much like observablehq.com does!)
I’ve attached a screenshot showing my issue. As you can see, the rendered content is in the main column, but since I can’t figure out how to control the width, it flows out under the right column and off the page.
I need this to work across all screen sizes.
I’ve gone through the docs many times now and can’t get it straight in my head how I might defined a custom Library class with an overridden ‘width’ function.
Thanks in advance!
Note: To clarify, I know I can set static widths in my notebook, but I would like to avoid that in order to keep things responsive.