Blocks rearrange themselves to fit smaller screens, and you can change a block's design for tablets and phones where it needs to look different: a smaller heading on a phone, a row that turns into a stack, less space around a section's content.
Change a setting for tablets or phones
Open your project in Fantasma.
In the toolbar at the bottom of the canvas, click the screen icon, Preview size. A menu opens.
Select Tablet or Mobile. The canvas narrows to that width.
Select the block you want to change, on the canvas or in the Sections list.
In the right sidebar, change the setting, such as Size under Typography. The setting's label turns blue. Its value now applies to this screen size only.
1
Preview size
Click Preview size and select Desktop to check the desktop design. It keeps its own value, and a later change on Desktop does not replace the tablet value.
A value you set on Tablet also applies on phones, until you set a different one on Mobile. A value set on Desktop applies everywhere that has no value of its own.
Go back to the desktop value
With Tablet or Mobile selected, click the blue label of the setting. A menu opens, Set on Tablet or Set on Mobile.
Click Reset to Desktop. On Mobile, when the tablet has its own value, the menu says Reset to Tablet and goes back to that value. To go back to the desktop value on both, reset the setting on Tablet as well.
Settings that can differ by screen
These block settings keep a separate value for each screen size. Some sit in groups you open with +, such as Spacing and Layout:
Text Size and Max lines
Width, Height, Aspect Ratio and alignment
Padding, Margin and Gap
Position and the pin settings
A Group's Layout and its options, such as Max columns, so a row of columns can become a stack on phones
Every other change you make while you preview Tablet or Mobile applies to all screen sizes. That includes text, images, links and colors, and every setting of a section itself, such as its padding. The blocks inside a section keep their own values.
Which screens count as tablets and phones
Size
Visitors' screen width
Preview width
Desktop
1024 px and wider
1480 px
Tablet
672 to 1023 px
768 px
Mobile
Below 672 px
375 px
The preview shows one typical width in each range. To see the page at another width, open the theme on your Ghost site and resize the browser window.
A font size in Styles can be set to Fluid, so text in that size shrinks on smaller screens with no tablet or phone value. Text styles and font sizes explains how.
Blocks rearrange themselves to fit smaller screens, and you can change a block's design for tablets and phones where it needs to look different: a smaller heading on a phone, a row that turns into a stack, less space around a section's content.
Change a setting for tablets or phones
A value you set on Tablet also applies on phones, until you set a different one on Mobile. A value set on Desktop applies everywhere that has no value of its own.
Go back to the desktop value
Settings that can differ by screen
These block settings keep a separate value for each screen size. Some sit in groups you open with +, such as Spacing and Layout:
Every other change you make while you preview Tablet or Mobile applies to all screen sizes. That includes text, images, links and colors, and every setting of a section itself, such as its padding. The blocks inside a section keep their own values.
Which screens count as tablets and phones
The preview shows one typical width in each range. To see the page at another width, open the theme on your Ghost site and resize the browser window.
A font size in Styles can be set to Fluid, so text in that size shrinks on smaller screens with no tablet or phone value. Text styles and font sizes explains how.