This information is specific to the Classic Editor, and not relevant for Editor 2.0 (formerly known as the All-Flex Editor.) To identify your current editor version, see How to Identify the Editor Version Your Site Uses.
Due to Apple’s release for iPads (iPadOS), iPads display the same view as desktop. However, you can switch to Responsive desktop-tablet layout to ensure all customizations are visible on live sites.
Responsive layout shows the top navigation header on larger desktops and switches automatically to the hamburger menu header when the screen size is 1024px and below. The small screen layout may be customized, if needed.
Most sites will automatically have this feature enabled and the toggle noted below will not be available.
For sites that this hasn't been toggled on, once toggled on, the option to toggle it off will be removed.
The mobile view of a site created in the classic editor, including the header, is determined by the device used, not by the size of a browser window. As a result, resizing your desktop browser to simulate a mobile viewport will not accurately represent how the site or header looks on actual mobile devices. To see the true mobile presentation of the site, including the header, it is best to view them directly on a mobile device.
To use responsive site layouts:
- In the side panel of the editor, click Theme, and then click Site Layout.
- Under Desktop click the Responsive Layout toggle.
- Select a site layout for above 1024 px.
- Select a site layout for 1024px and below.
After switching to responsive site layouts, you can switch views in the top navigation to show Large Desktop (above 1024px), Small Desktop/Tablet (1024px and below), and Mobile. For more information, see Switch Views.
CSS is the same for both Large Desktop and Small Desktop/Tablet breakpoints, and you will not see a Tablet CSS.
Elements may be hidden per breakpoint (Large Desktop and Small Desktop/Tablet). For more information, see Switch Views and Show Hidden Elements.
Transitions are smoother and not based on User Agents.
Note the following tablet customizations automatically display the desktop layout, and there is no need to customize them:
- Photo gallery layouts
- Tablet personalization rules
- Animations
Important Notes
If you have hidden elements on your site, make sure they are visible before turning on Responsive Layout. To fix, turn Responsive Layout off, unhide all hidden elements. Then you can turn Responsive Layout on and re-hide any hidden elements. For more information, see Show Hidden Elements.
Personalization no longer shows a tablet device. Selecting desktop also affects tablet views.