Responsive Design (tablets and mobile)
The Visual Builder allows us to accommodate responsive and mobile design fairly quickly through the use of the responsive settings.
To get started, open a page you wish to edit using the visual builder. Find the section, row or module that you want to edit and click the cogwheel/settings wheel. Then click the design tab and open the settings that you want to change.
Hover over the setting that you want to change and look for the smartphone icon to appear to the right (if none appears, then there are no responsive settings available for that section). Click it. Icons for desktop, tablet, and mobile should now appear and you can choose the device that you want to edit. Edit your responsive settings and save. **If these icons are already visible, that means responsive settings are already being applied and you can adjust them as needed.
Design settings are inherited to the smaller device by default
If you don’t change the design settings for a specific device, it will inherit the design settings from the closest bigger device.
For example, if you set 100px padding for desktop devices without changing the settings for the smaller devices, both tablet and phones will inherit the 100px padding.
If you change the padding to 50px for tablets, both tablets and phones will have 50px padding.
If you change the moible padding to 25px it will not be inherited to any other device since phone the smallest view.
Once you change a custom design setting for a specific view, it will not inherit the value from the bigger device(s).
Duplicated sections & greyed out sections
When using the visual builder, you may find some sections are greyed out and/or repeated. This is due to the fact that sometimes we may wish for items to appear in a different order on tablets or mobile, then how they are on the desktop. For example, on desktop we may have a 2 column layout with text to the left and an image on the right. When it is resized to tablet and mobile, these columns stack so as to present the left column first followed by the right (text and then image). But maybe we want the image to appear first on mobile. We can use the disable and enable functions to allow for more flexibility.
If a section, row, or module is greyed out, that means it has been disabled for a particular layout. When hovering over the section, row, or module, selecting the 3 dot will bring up a list of settings including the disable or enable setting. Selecting this will allow you to see where this section, row, or module has been disabled and allow you to alter those settings.
In the example above (a column with text on the left and image on the right), we can accommodate the desired outcome by duplicating the row. Then, the first instance of the row can be disabled for tablet and mobile. The duplicated row can have the text and image modules switch columns and then have the entire row disabled for desktop. Thus allowing for more control in the display of content on various devices.