You are here:
Flexcards Element Responsiveness (Managed Package)
For the managed package runtime, in the Flexcard Designer, enable responsiveness on one or more elements to set the width to change as the visible area of a page, called the viewport, changes. By default, the width of an element is the same regardless of the width of the viewport device on which the user views the Flexcard. The width of an element is 1 to 12 parts of a 12 column grid. For example, a field element that is 6 columns wide takes up 50% of the available horizontal space.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
When the Responsive feature is enabled in the Style panel of a Flexcard, the responsive sizing of elements is mobile-first. Sizing starts at the smallest viewport breakpoint and is continuously applied upwards until the next wider breakpoint overrides it. When responsiveness is enabled, the default width becomes the width of the smallest viewport breakpoint.
Build with a mobile-first approach if most or all of your elements are responsive. Build your Flexcard at the smallest canvas size by selecting Mobile L/S from the Viewport Dropdown. After setting widths for all breakpoints for each element from the Style panel, view your layout at different viewports by toggling through the Viewport Dropdown. See View a Flexcard at Different Viewport Breakpoints (Managed Package)
Example Responsive Subject and CaseId Field Elements
A user wants the Subject field and a CaseId Field element next to each other on the Medium and Large viewports, but stacked on Small and Smaller viewports:
-
Set the Subject field to 12 for Smaller and Small, and 10 for Medium and Large.
-
Set the CaseId field to 12 for Smaller and Small, and 2 for Medium and Large.
