iPads running iPadOS display the same view as a desktop. Enable the responsive desktop-tablet layout to ensure all customizations remain visible on live sites.
The responsive layout displays the top navigation header on larger desktops and automatically switches to the hamburger menu header when the screen size is 1024px or below.
Before you begin
- Guesty enables this feature automatically for most sites. If the toggle is missing, the feature is already active. Once you enable this feature, it can't be disabled.
- CSS and breakpoints: The CSS remains the same for both Large Desktop and Small Desktop/Tablet breakpoints. You won't see a separate Tablet CSS.
- Element visibility: You can hide elements for specific breakpoints.
- Transitions: Layout transitions are based on screen size rather to ensure a smooth experience.
-
Automatic layouts: The following customizations automatically use the desktop layout and do not require manual adjustment:
- Photo gallery layouts
- Tablet personalization rules
- Animations
- If your site contains hidden elements, make them visible before enabling the Responsive Layout. If elements become distorted, toggle Responsive Layout off, unhide all elements, and then toggle Responsive Layout back on before re-hiding the necessary elements. Learn how to show hidden elements.
- Personalization rules won't include a specific tablet device. Settings selected for desktop also apply to tablet views.
Use responsive site layouts
Follow the steps below to enable responsive layouts and manage screen breakpoints.
- In the side panel of the editor, click Theme.
- Click Site Layout.
- Under "Desktop", toggle on Responsive Layout.
- Select a site layout for screens above 1024px.
- Select a site layout for screens 1024px and below.
- Toggle on or off Hide back-to-top button on mobile.
After enabling the responsive layout, use the view selector in the top navigation bar to switch between Large Desktop (above 1024px), Small Desktop/Tablet (1024px and below), and Mobile. Learn how to switch views.