How to Use Responsive Mode
As of version 4.0, you can now switch between desktop, tablet and mobile phone views while editing! We call this responsive mode. In responsive mode, your site would resize into a smaller size to simulate how your site would look like in smaller screens.
Limited Editing Capabilities
While viewing your site in tablet or mobile phone views, you will have limited editing capabilities. With this, you can ONLY do the following:
- Edit text
- Format text styles using the text formatting toolbar
- Adjust some margins of elements and rows *
- Hide rows in tablets or mobile phones
* PBS applies some responsive styling to your elements and rows, so some margins will not be adjustable.
Here’re some stuff that you cannot do:
- Add, remove, drag around elements
- View element properties
- Resize images, icons, rows and other resizable elements
Adjusting Margins for Specific Screen Sizes
If you are viewing your site in tablet or mobile phone views, any margin adjustments you make only get applied to the current view and to the smaller view. This enables you to tweak your designs to make them look better in smaller screens, separate from the full desktop version.
Here’s an example to make things clearer.
- If you view your site in tablet mode, and adjust the margins of a heading, that adjustment will only apply to tablet screens. This will also get applied to mobile phone screens. If you go back to desktop mode, the original margin will be brought back.
- Now, if you go to mobile phone mode and further adjust the same margin again, that adjustment will only apply to mobile phone screens. Afterwards, you’ll have a different margin for desktops, tablets or mobile phones.
This only applies to adjustments to margins, text changes or text style changes get applied across all screen sizes.
Hiding Content In Tablets Or Mobile Phone Sizes
When viewing in tablet or mobile phone views, your rows will have a new “eye” toolbar button that will show up when you hover over them. Clicking this will allow you to show/hide the row for the current screen size.
Hidden rows will become a bit transparent when editing to indicate that they’ll be hidden when you’re finished editing.
Note that this feature is only available for rows.
