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.
To use responsive site layouts:
- In the side panel of the editor, click Design, 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.