--- schema_version: "1" id: 57e1b0da530dff2379b3a505324273a77f391a9f315c158bb470968f02700403 title: Flexcards Element Responsiveness (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_flexcards_element_responsiveness.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_element_responsiveness.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: a92341c9e50f012e4ba840d176905d05b4650329bdbccf48e82956e84143c31c description: 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. products: - Omnistudio release: "264" --- # 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. ![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). 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)](https://help.salesforce.com/s/articleView?id=xcloud.os_view_a_flexcard_at_different_viewport_breakpoints.htm&release=264.0.0&type=5 "For the managed package runtime, adjust the size of your Flexcard's canvas to test for responsiveness. Use the Viewport Dropdown in the Flexcard Designer to mimic the sizes of a desktop, laptop, and smaller mobile devices.") ![FlexCard Designer viewport breakpoint dropdown](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/canvas_size_dropdown.png) ![example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) example 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. ![FlexCards responsiveness for Subject field](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/dimensions_responsive_subject.png) ![FlexCards responsiveness for CaseId field](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/dimensions_responsive_caseid.png) ![FlexCard viewport Large in Preview](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/large_viewport.png) ![FlexCard viewport Small in Preview](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/small_viewport.png) ## Available Breakpoints

Viewport Breakpoint

Device

Large (>=1024px)

Laptop and desktop

Medium (>=768px)

Large tablet

Small (>= 480px)

Small or medium tablet, and large mobile device

Smaller (< 480px)

Small or medium mobile device