Breakpoints 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.
-
Tablet (768px-1024px)
-
Mobile (767px and below). We always recommend checking mobile breakpoint changes on a mobile device, instead of resizing a desktop screen.
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.
Almost everything in the editor, with the exception of the header and footer, can be edited on a per-device basis by making the content specific to that device.
To edit content per-device:
-
Copy the content that you would like to be device-specific. Right-click the widget, click copy, then click paste.
-
Right-click on one of the widgets, select Hide on device, then select the device where you want the widget to be hidden. For example, setting a button to Hide on Desktop removes the button from the desktop, but displays the button in the tablet and mobile sites.
-
Click on the original content and select Hide on device, then hide the content on the device(s) on which you do not want to change this content. For example, if you set your copy button to Hide on Desktop, you would set the original button to Hide on Tablet and Hide on Mobile. This way, you will have two different buttons; one showing on your desktop and a different one showing on your tablet and mobile.
-
If you want the content to be different on all three devices, you can copy it again (so you have a total of three copies of the same content) and have a different button displayed on each device.
-
You now have two (or three) identical, but different pieces of content, each displayed on a different device. Any further changes made to this content will only affect the device on which it is set to show.
Hidden content may still show in the code of the live site (after publishing/republishing). This is expected and due to the technology used. When you hide a widget, section, or any content in the editor on a specific device, we hide it using CSS Media Queries. What this means is that the HTML (although hidden on the website) still exists within the web page when a viewer looks at the content. This can sometimes cause a problem where an audit tool that scans the website will identify this hidden content, even though you thought that it was removed from the page.
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.
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. For more information, see Switch Views.
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.
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.
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:
-
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. For more information, see Switch Views.
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
-