---
schema_version: "1"
id: 5f1a32f81753d85283d4ca57847c3d27ddf0eafaaead0186f721576a46f6b28f
title: View a Flexcard at Different Viewport Breakpoints (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_view_a_flexcard_at_different_viewport_breakpoints.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_view_a_flexcard_at_different_viewport_breakpoints.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 848e4a637194085a566fdc663719311895b766c07f27ea14b9d631292e9fcf76
description: 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.
products:
  - Omnistudio
release: "264"
---
# View a Flexcard at Different Viewport Breakpoints (Managed Package)

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.

![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).

The viewport size is saved when changed. After navigating away from the Flexcard Designer, toggling between Design view and Preview, or reloading the page, the viewport size remains the same until you change it.

1. From the Flexcards tab, click a version of a Flexcard to open the Flexcard Designer.
2. To test responsiveness in Design view, select a breakpoint from the Viewport Dropdown.
    
    ![FlexCards ­Design view 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/breakpont_toggle_flexcard.png)
3. To test responsiveness in Preview, click the Preview tab and select a breakpoint from the Viewport Dropdown.
    
    ![FlexCards ­Preview ­Viewport ­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/flexcards_preview_viewport_dropdown.png)

What’s next: Enable elements to respond to different viewport widths.