At the bottom of the left panel in Tatsu interface, you will find the option to change the view port of the builder. Choose the device icon from this controller, to make changes to settings in that particular screen size.
All the modules in the Header Builder including the Header Row and Column have Responsive Visibility Controls. The option will have the label “Hide In”. You can select multiple devices from which you want to hide a particular module. A most common usage of this control will be to hide the Horizontal Menu from Mobile nad Tablet devices and add a Hamburger Menu that is visible
While editing the settings of any module in TATSU, you need to look for a small monitor icon beside the label of the setting. This icon means, the field can be changed responsively.
1. The changes made in the responsive settings will only be applied for the particular device. For ex. if you are modifying the Padding Value for Laptop device, the change will apply only for Laptop screens and Tablet and Mobile will still hold the default values.
2. Only the “settings” which have the “device’ icon can be changed responsively. Actions like rearranging or deleting the modules will be applied on all screen sizes. In case you need to rearrgne the placements of certain modules specific to a device, we recommend you use the Responsive Visibility control (explained above).
3. Device Size Window –
Mobile < 767px
Tablet – 768px – 1024px
Laptops – 1025px – 1377px
Desktops – > 1378px
Just click on the icon, and 4 icons representing view ports will be seen. Click on each view port icon to edit the value of that setting. Once you click on the view port, the display on right panel will also be changed so you can view your changes instantly.
