Responsive Editing Mode lets you preview pages as they appear on medium and small devices and edit them directly in that device size view such as mobile and tablet.
The SASPanel Page Builder editor's default layout is for large screens, and Responsive Editing Mode makes it much easier to adjust the settings for medium and small devices.
To enter the responsive editing mode, go to 'My Presell Pages'. Either go to 'View My Pages' to select an existing page you want to edit or go to 'Build New Page' to create a new page.
Once inside the page builder, click the drop-down option from the top left tool bar of the page and select 'Responsive Editing'.
You'll immediately see the medium-screen display for a prototypical tablet device in portrait orientation, as shown in the following screenshot.
Immediately you can see that the column are now too small for the content, and the headings are bleeding across the column border because the font is too big.
One solution is to adjust the Icon modules so the icons and text are smaller, but the columns are just too narrow, so our solution is to change the column margins from 80px to 40px on medium devices.
To do this, open each of the four column settings, and click the Advanced tab.
The Margins field automatically displays the setting for medium devices, as you can see by the tablet icon displayed next to the Margins label.
Because we haven't set a value yet for medium size, the field values are initially empty.
Set one margin value to 40 and click the Link values icon to synch all four values, as shown in the following screenshot. When this toggle is active, the icon displays in blue.
That initial change doesn't look so good, but once you set all four columns, the result is much better, as the following screenshot shows.
You can further tweak text size and icon size for medium size devices. You can also set a different row background image for medium size devices.
Good idea to save your layout at this point. When you publish, the screen returns to the default large screen, and the large screen layout may not look right.
Clear your caches, especially your browser cache, and that should fix the display.
Repeat this process for mobile by entering Responsive Editing Mode and then clicking the phone icon. The following screenshot shows mobile view before any mobile-specific changes made to settings.
You can adjust the column margins specifically for mobile. In the following screenshot, we set the column's top margin to 20px and clicked the Linked values icon toggle to set the same value for all four sides for small devices.