Inside Activate
Development
V8 Forms - Responsive Design
4 min
activate forms can be designed to be responsive to the screen size of the client device this is a standard way of creating forms that change depending upon the client typically the following changes can be made hide or show elements based on the screen size change columns on grids for example, on a small screen there is a single column and on larger screens multiple flow/flex panels change the display from columns to rows on a smaller screen breakpoints breakpoints are used to control what happens at a specific fixed screen width each breakpoint (a key) matches with a fixed screen width (a value) xs, extra small 0px sm, small 600px md, medium 900px lg, large 1200px xl, extra large 1536px responsive properties there are certain components and properties that can be used to control a responsive control these properties have a semi colon";" separated list of values that can use the breakpoint names above the first value is for the "xs" screen size this means that the first value values apply to that screen size and larger unless overridden for example, a panel allows a display property this corresponds to the equivalent css display property for example, the following panel will be hidden on xs and sm screen sizes and be displayed on 'md' or larger screens \<panel display="none; md block">\</display> the following panel with be displayed on xs and sm screens but hidden on larger screens \<panel display="block; md none">\</display> responsive controls the following controls and properties are responsive aware true left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type a good tutorial for flex box settings is available here https //css tricks com/snippets/css/a guide to flexbox/ a good tutorial for grid column settings is available here https //css tricks com/almanac/properties/g/grid template columns/