Skip to main content

Tools for responsive design

KAIZEN's responsive design tools let you test and optimise your application's layout across different devices.

App Designer provides built-in tools to help you create layouts that adapt to different screen sizes. You can preview your design on multiple devices and adjust component behaviour for specific screens. This makes your application work as intended on various devices.

Responsive layout toolbar​

The responsive layout toolbar appears at the top of the App Designer canvas. Use this toolbar to switch between different device views and see how your application looks on each screen. You can toggle between Desktop, Tablet, and Mobile for a quick preview.

By switching between views, you can identify problems early and make adjustments as you design. This ensures your application works on every device.

Component responsive features​

Many components include built-in responsive settings that automatically adjust to the screen size. These settings give you the precise control over how individual components adapt to the devices.

For example, the table will display in its original state on a desktop screen. On a mobile device, each row will collapse into a more readable, card-like view to prevent horizontal scrolling.

Design best practices​

  • Structure first: Define your layout using sections, blocks, and cells before adding content. This simplifies the subsequent configurations.

  • Design for mobile: Adopt a mobile-first strategy. Use the layout toolbar to verify usability on small screens.

  • Choose the appropriate component: Use blocks for main content that should stack vertically on mobile. Use cells for precise layout arrangements.

Create a responsive table​

For example, to design a responsive table, perform the following:

  1. On the canvas, select the Table component you want to modify.

  2. In the Setter Plugin panel on the right, select the Props tab.

  3. In the Style and theme section, find the Responsive table type property. Click Collapse row to change the layout.

  4. For verification, select the mobile icon on the top bar and preview it. The table columns should stack vertically for each row.

Last updated on 20 May 2026