Shoppers see your page on phones, tablets, laptops and desktops. You can style each element once for every screen, then change it for just the screen sizes that need something different, such as smaller text or less spacing on phones.
Choose a screen size
The icons at the top of the editor set which screen your changes apply to:
All screen sizes (the default): changes show on every screen.
Large screens: 1200px and wider (desktops).
Medium screens: 992px to 1199px (laptops).
Small screens: 768px to 991px (tablets).
Extra-small screens: 767px and smaller (phones).
Pick a screen size in the top bar to style your page for that screen.
Edit for every screen at once
With All screen sizes selected, every change you make in the settings panel applies to all screens. Start here: set up your layout and styles once, then adjust individual screen sizes where needed.
All screen sizes is selected by default.
Edit for one screen size
Click Large, Medium, Small or Extra-small screens. The canvas resizes to match, and the settings panel shows a label such as Editing for medium screen sizes above Main.
Changes you make now apply to that screen size only. Screen sizes you haven't changed keep the All screen sizes styles.
With a screen size selected, changes apply to that size only.
See which screens have changes
When a section has styles changed for a specific screen size, a small screen icon appears at the right of the section's header, for example next to Main. Hover over it to see which screens: for example, Styles edited for: Medium screens.
The icon next to a section shows that it has changes for specific screen sizes.
Settings that always apply to every screen
Some settings can't be different on each screen, such as a heading's type (H1, H2 and so on). When you're editing a specific screen size, these settings have a small screen icon next to their name. Hover over it to see a message such as Changing the field "Heading type" will affect this element at all screen sizes.
Settings with this icon apply to every screen size, even when you're editing just one.
Preview different widths
Drag the handles on the left and right of the canvas to see how your layout looks at any width within the screen size you're editing.
Drag the canvas handles to preview other widths.
When you preview the page, it shows at the size of the device you're using.
Show or hide elements on each screen
The Visibility section has a Show on... toggle for each screen size. Turn one off to hide the element on that screen size. For example, to hide a Container on phones:
1. Select the Container
Click it on the canvas, or select it in the Layout panel.
2. Open Visibility
Scroll down the settings panel to the Visibility section.
3. Turn off Extra-small screens
The Container and everything in it is hidden on phones, and still shows on larger screens.
Turn off a screen size under Show on... to hide the element there.
Elements inside another element can only show where their parent shows. If a Container is hidden on phones, everything in it is hidden on phones too, and you can't turn that screen size back on for the elements inside it. Select an element to see the screens it inherits from its parent.
An element inside a Container inherits the screens the Container shows on.
Turn the improved workflow on or off
This editing workflow is on by default. To switch it, go to Settings in the Shogun dashboard, scroll to the Editor section, and use the Enable improved responsive editing workflow toggle.
With it turned off, the editor shows four device buttons instead of the screen size icons, and you change one device at a time from the device icon on each section, which opens Edit on.