--- schema_version: "1" id: 798713a5065162f4049979da92c09b2e21dbe70b291c5e3e55713091474619d6 title: Create Responsive Elements on a Flexcard (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_create_responsive_elements_on_a_flexcard.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_create_responsive_elements_on_a_flexcard.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 17d0eb002b64d5669c67e0d5200242e75c75e1dd35b15d03632be6c45dbe4836 description: For the managed package runtime, enable an element's width to change when the viewport updates. For example, make the widths of the fields for First Name and Last Name of a Contact take the full width of the page on smaller devices, but shrink to 50% on larger devices such as laptops and desktops. products: - Omnistudio release: "264" --- # Create Responsive Elements on a Flexcard (Managed Package) For the managed package runtime, enable an element's width to change when the viewport updates. For example, make the widths of the fields for First Name and Last Name of a Contact take the full width of the page on smaller devices, but shrink to 50% on larger devices such as laptops and desktops. ![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). By default, the width of an element is the same no matter the width of the viewport of the device your user views the Flexcard. When responsiveness is enabled, the width of an element changes to the width set at each viewport breakpoint. The default width becomes the width on the smallest viewport breakpoint for a mobile-first approach. See [Flexcards Element Responsiveness (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_element_responsiveness.htm&release=264.0.0&type=5 "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."). 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) 1. In the Flexcard Designer, click an element on the canvas, and click **Style** to open the Style panel. 2. From the **Dimensions** section, enable **Responsive**. ![Note](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) Note Easily identify responsive elements by selecting or hovering over the element. A device icon displays next to the Component Name. ![FlexCards responsiveness Device icon](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/device_icon_responsive_element.png) 3. For each viewport breakpoint, adjust the slider to set a width. **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: ![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) 4. To test the responsiveness of your elements, toggle between viewport widths from 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."). What’s next: Preview your Flexcard. See [Preview a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_preview_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, preview your Flexcard's appearance and functionality before publishing it to a Lightning page or Experience Builder site. In Preview, test how your Flexcard looks on multiple devices and test the functionality of action links and other interactive elements.").