Responsive Desktop/Tablet Layout

Note: This option is still in beta.

Due to the recent iPadOS release, iPads render a desktop version of your website, which means that visitors on tablets may not be getting the ideal view of your sites. By switching to responsive desktop/tablet layout you can ensure that your tablet-specific customizations are visible on live sites.

This responsive layout automatically switches the top navigation header from the larger desktop version to a hamburger menu when the screen size is 1024px and below.

To use the responsive layout, select Design on the left side of your site editor and click “Site Layout.”

Under Desktop/Tablet toggle on the “responsive desktop/tablet” option. Select a site layout for above 1024px, as well as 1024px and below.

After selecting this responsive layout, you can switch views in your top navigation to show the desktop, tablet, and mobile layouts to see how this change affects the experience.

NOTES:

1. Large desktop and small desktop/tablet CSS is identical. You will not see a tablet CSS.
2. Some elements may be hidden on different breakpoints. You can read more about hidden elements here.
3. Transitions will be smoother in the responsive layout and dependent on the User Agent.
4. Certain tablet customizations will automatically display the desktop layout; there is no need to customize:
   • Photo gallery layouts
   • Map and online scheduling widget: the “Use as Button” setting
   • Tablet personalization rules
   • Animations