The Layout screen of Styles sets how wide your content can grow and how much space sits around it. Sections and blocks pick these values by name, so a change here reaches every page. Open it with the paintbrush icon, Styles, in the icon rail, then click Layout.
Container widths
Sections and blocks choose one of four widths in their Layout settings. Container widths sets how wide each one is.
Width
Default
Typical use
Wide
1400 px
Large grids and full headers
Standard
1140 px
Most sections
Narrow
720 px
Text you read, such as a post or a form
Full
100%
The whole width of the browser window
Each field takes px, %, em, rem or vh; pick the unit from the list next to the number. One rem is 16 px. On a screen narrower than the width, content fills the screen instead. Wide images in Ghost posts also stop at the Standard width.
To choose which width a section or block uses, see Layout settings.
Between sections
Between sections, under the Sections heading of the screen, adds the same space above every section except the first on each page. Pick a spacing preset; the default is None, so sections touch. A section whose own Margin is set to anything other than None keeps its own space.
Spacing presets
The Spacing list holds the named sizes blocks and sections pick for padding, margins and gaps. Change one, and every place that uses it changes.
Preset
Size
None
0
Tiny
8 px
Small
24 px
Regular
40 px
Medium
64 px
Large
96 px
Extra Large
128 px
Huge
168 px
Click a preset to open its settings beside the list:
Setting
What it does
Name
Shows for custom presets only. Up to 32 characters.
Size
The space in px or rem, from 0 to 400 px. The slider reaches 200 px; type a larger value in the field. None has no size; it is always 0.
Theme presets cannot be renamed or deleted. To add your own, click the plus button next to the Custom heading under the list. A new preset starts at 2 rem (32 px), and a project holds up to 24. To rename a custom preset, double-click it. To delete one, right-click it and click Delete. Places that used a deleted preset get no space, and Between sections goes back to None if it used it.
Reset the screen
The screen's menu, the three dots next to Layout, has Reset Container widths and Between sections. It puts the four widths and Between sections back to their defaults. To reset one spacing preset, click it, then click the three dots next to its name in its settings, and click Reset to default.
Fantasma saves your changes as you make them. Your Ghost site shows them after you publish your theme.
The Layout screen of Styles sets how wide your content can grow and how much space sits around it. Sections and blocks pick these values by name, so a change here reaches every page. Open it with the paintbrush icon, Styles, in the icon rail, then click Layout.
Container widths
Sections and blocks choose one of four widths in their Layout settings. Container widths sets how wide each one is.
Width
Default
Typical use
Wide
1400 px
Large grids and full headers
Standard
1140 px
Most sections
Narrow
720 px
Text you read, such as a post or a form
Full
100%
The whole width of the browser window
Each field takes px, %, em, rem or vh; pick the unit from the list next to the number. One rem is 16 px. On a screen narrower than the width, content fills the screen instead. Wide images in Ghost posts also stop at the Standard width.
To choose which width a section or block uses, see Layout settings.
Between sections
Between sections, under the Sections heading of the screen, adds the same space above every section except the first on each page. Pick a spacing preset; the default is None, so sections touch. A section whose own Margin is set to anything other than None keeps its own space.
Spacing presets
The Spacing list holds the named sizes blocks and sections pick for padding, margins and gaps. Change one, and every place that uses it changes.
Preset
Size
None
0
Tiny
8 px
Small
24 px
Regular
40 px
Medium
64 px
Large
96 px
Extra Large
128 px
Huge
168 px
Click a preset to open its settings beside the list:
Setting
What it does
Name
Shows for custom presets only. Up to 32 characters.
Size
The space in px or rem, from 0 to 400 px. The slider reaches 200 px; type a larger value in the field. None has no size; it is always 0.
Theme presets cannot be renamed or deleted. To add your own, click the plus button next to the Custom heading under the list. A new preset starts at 2 rem (32 px), and a project holds up to 24. To rename a custom preset, double-click it. To delete one, right-click it and click Delete. Places that used a deleted preset get no space, and Between sections goes back to None if it used it.
Reset the screen
The screen's menu, the three dots next to Layout, has Reset Container widths and Between sections. It puts the four widths and Between sections back to their defaults. To reset one spacing preset, click it, then click the three dots next to its name in its settings, and click Reset to default.
Fantasma saves your changes as you make them. Your Ghost site shows them after you publish your theme.