Enabling Divi Responsive Views
The Divi Responsive Views feature can be activated by either clicking the "mobile/tablet phone icon" in the Divi Toolbar in the Backend Builder:
Or clicking the same icons in the Visual Builder:
It can also be activated by clicking the mobile or tablet icons in any Modal Settings windows:
Draggable Horizontal Handles
When Tablet or Phone view mode is active draggable handles appear on the left and right side of the layout, and with them Content window can be made as wide as 980px and as narrow as 320px.
Phone View mode starts (and ends) at 768px wide, so if you drag the width across the 768px width threshold, the View mode automatically changes from Tablet to Phone, or from Phone to Tablet.
Tablet: 980px - 768px
Phone: 768px - 300px
Responsive Views - Draggable handles
Width and Height Inputs
You can manually enter in the width or the height of the View mode. The custom height input doesn't actually change the height of the layout however a fold line appears at this height. By default, the height value is blank and no fold line is visible. The only way for this fold line to appear is to manually input a height value. Once this fold line is visible, It can be dragged.
Responsive Views - Horizontal fold line
Device Selector & Orientation Switcher
By default, the device selector is set to Custom. When you select a device (like Iphone6 or Samsung S10 for example), the width and height input fields are populated with the applicable values. If the current height and width are both < 980px then you can change the orientation (swap width and height values) using the orientation icon.
The orientation icon is hidden if either the current height or width is
> 980px(see exception in "Default Phone and Tablet Preview Widths" spec below)By default, each device is displayed in portrait mode.
The following things need to be considered when switching Device, Orientation, manual size input, or dragging:
Switching Orientation often times cross over the
768pxwidth threshold so the View mode needs to switch from tablet to phone or phone to tablet in these cases.If at anytime the width handle is dragged or set to a manual value while a device is selected, the device selected switches back to "custom".
If you perfectly input an exact device width and height, the respective device will show as selected in the selection menu.
The orientation icon switches from the landscape icon to the portrait icon (and vice versa) when clicked. This can happen by switching a device, or if the width becomes greater than the height (or vice versa)
"make default tablet view" and "make default phone view" buttons accurately switch to reflect the current View mode
When phone or tablet icons are clicked in the settings bar or by using the keyboard shortcut to change view modes, the width is switched back to the theme default preview width or the custom-defined preview width if one has been set.
Responsive Views - Device selector
Default Phone and Tablet Preview Widths
The default phone and tablet views are the theme default responsive views. These views have no defined height so the height input is left blank and no vertical fold line appears. The width value displays the theme default values of 480px for phone and 768px for tablet.
Logic
If you are currently on the default phone or tablet view, the orientation icon is displayed and will toggle between the default phone and tablet views.
If you click the "Make Default Phone/Tablet View" button, the device selector switches to "Tablet View" or "Phone View" depending on the View mode.
If you are currently on the default view, the button switches to "Reset Default Tablet View" or "Reset Default Phone View"
If you are currently on the theme default or tablet or phone view, the "make default" button is Disabled a disabled cursor is shown on hover.