Breakpoints (also called screen sizes) are pixel ranges that correspond to the width of different devices, such as desktop, tablet, and mobile. When the width of a device is within a breakpoints predefined pixel range, the layout of the site is adjusted so the content and design is optimized for that device size and orientation.
For example, if I am viewing a site on a desktop computer I can view the full site menu, but when I view the site on my mobile device, I see a hamburger menu instead.
Following are the breakpoints offered in the editor:
Desktop (1025px-1399px). This is the default breakpoint.
Wide desktop (1400px and up). This is only available in flex mode in Classic Editor.
Tablet (768px-1024px)
Mobile (767px and below). We always recommend checking mobile breakpoint changes on a mobile device, instead of resizing a desktop screen.
Mobile landscape (468px-767px). This is only available in flex mode in Classic Editor.
If you make design, layout or content changes to the default desktop breakpoint, the changes are automatically applied to the other breakpoints. If you change content, such as adding a widget, editing text, or adding or deleting a section, the change automatically applies to all other breakpoints, regardless of which breakpoint the change was made on. For example, if you add a widget on the tablet breakpoint, the widget will be added on all other breakpoints as well.
However, if you make changes to the position or size of an element on specific breakpoints, the changes will not apply to other breakpoints. For example, if you change the size of an element on the mobile breakpoint, the change will only apply to the mobile and mobile landscape breakpoints and no other breakpoints.
Hide on a Certain Screen Size (Classic Editor)
Switch Between Device Views
Responsive websites work on desktop, tablet, and mobile. For this reason, our responsive editor lets you preview the site in each of these views while editing. This lets you check how your site looks on different devices before you publish, ensuring that your customers have a positive experience no matter what device they are using to view the site.
To switch device views, click on one of the device buttons in the top navigation bar:
The different device views are not separate versions of your site. Deleting an element in one view (for example, mobile), removes that element from the entire site (desktop, tablet, and mobile). Instead of deleting, right-click on the element and select to hide an element on a specific device.
Device previews do not always reflect precisely what you see on an actual device. Features like fonts, size of the device window, user interface and browser behavior can all cause these previews to be inaccurate to various degrees. For the most accurate version of the site, check on a real device.
Edit by Device(Classic Editor)
Edits made to one device appear on all devices. For example, when a row is deleted on the tablet view of your site, the row will also be missing on the desktop and mobile views of your site. This is because content can be shared across all devices.
However, you may want to differentiate which content appears on which devices. You can use our edit by device features to accomplish this, and serve your visitors content that is appropriate for the device they are accessing your site from.
When making edits to a specific device, it is often necessary to switch views.
Edits That Do Not Affect Other Devices
Many settings will indicate which devices they affect. For instance, a setting may say Change affects desktop and tablet along with an icon that represents the devices.
There are several edits in the editor that can be changed without affecting mobile. These are:
Spacing (Margins and padding)
Positioning
Width
Height
Site/Page background
Font size (it will not affect text that has been edited in mobile before)
Changes to the header and footer on tablet view do not affect the desktop and mobile view
Every other edit you make in the each device view will affect other devices.
Widget-Specific Changes
While some widgets work fine across all devices, there are some drastic differences between devices which creates a need for a different set of features or design preferences per device.
Below is a list of widgets with design suggestions and notes for tailoring certain widgets on certain devices.
Background Images
Due to drastic differences in aspect ratios between devices, it's important to take special care with how you design images in your website. For example, a full page background on a row might look great on a desktop device, but horrible on a mobile device. This might be because desktop devices are more suited to larger width images, while mobile is the exact opposite. You can set a different Page background per device in the site theme settings. It's recommended to use a wide background image for desktop, and a narrow one for mobile or tablet.
Slider Widget
As with the background image, the images you selected for the desktop version of the slider widget may not look as great for tablet or desktop. It's recommended to either:
Adjust the frame size for the slider to fit on mobile, or
Hide the slider on desktop, and create a version specifically for mobile instead.
Images and Icon Widget
The image widget's size is not automatically adjusted in the mobile version. It's important to check your mobile devices where the image widget is used to make necessary adjustments to fit.
Hover Effects on Mobile or Tablet
Compared to desktop devices, tablet and mobile devices do not have a hover effect at all. Any hover layout or option is disabled on tablet/mobile devices.
Maps Widget
The Map widget has device specific options for when it will show as a button or a map.
Contact Form Widget
Contact forms will always appear one input per line on mobile.
vcita Widget
The vcita online scheduling widget has an option to only show a button, on the device of your choosing.
Responsive Tablet(Classic Editor)
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.
Note
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, click Theme.
Click Site Layout.
Under Desktop click the Responsive Layout toggle. You have the following options:
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.
Important Notes about Responsive Tablet
Following is additional information about the responsive tablet:
CSS is the same for both Large Desktop and Small Desktop/Tablet breakpoints, and you will not see a Tablet CSS.
Transitions are smoother and not based on User Agents.
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.
Personalization no longer shows a tablet device. Selecting desktop also affects tablet views.
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