Content width and responsive layouts
Setting a custom content width
By default, Potion will display your content with the default width of Notion content. Unfortunately, selecting the full width option in the Notion app is not something Notion exposes on its API. Because of that, Potion can’t see you made that selection and adjust your site based on it.
However, you’ll find a neat selection of content width setting in the Custom Style section of a site in the Potion Console.
Fixed vs. Fluid
Fixed means the content width is set to a fixed pixel width. It will not change as the screen gets very wide, there will just be more whitespace on both sides.
Fluid means the content width is set as a fraction of the window width. It will expand and shrink as the screen gets wider or tighter.
Sidebar visibility
Potion now supports extracting content out of the main section to place it into slots (see 
Layout slots). The visibility of the left and right sidebars will change depending on the size of the screen your page is viewed on and the content width setting you selected for your site.
Visibility of sidebars will adapt to screen sizes on various screen sizes depending on the content width setting. The tables below indicate the visibility of sidebars under different combinations of devices and content width settings.
Sidebar visibility when a single sidebar has content
| default/tight | relaxed | wide | full width | |
|---|---|---|---|---|
| mobile & tablet in portrait | left (overlay) | left (overlay) | left (overlay) | left (overlay) |
| tablet in landscape | ✔️ | ✔️ | left (overlay) | ✔️ |
| laptop | ✔️ | ✔️ | left (overlay) | ✔️ |
| desktop | ✔️ | ✔️ | ✔️ | ✔️ |
| large screen | ✔️ | ✔️ | ✔️ | ✔️ |
Sidebar visibility when both sidebars have content
| default/tight | relaxed | wide | full width | |
|---|---|---|---|---|
| mobile & tablet in portrait | LEFT (overlay) | LEFT (overlay) | LEFT (overlay) | LEFT (overlay) |
| tablet in landscape | LEFT ONLY | LEFT ONLY | LEFT (overlay) | LEFT ONLY |
| laptop | LEFT & RIGHT | LEFT ONLY | LEFT (overlay) | LEFT & RIGHT |
| desktop | LEFT & RIGHT | LEFT & RIGHT | LEFT ONLY | LEFT & RIGHT |
| large screen | LEFT & RIGHT | LEFT & RIGHT | LEFT & RIGHT | LEFT & RIGHT |