Designing responsive learning content means ensuring layouts look great on every screen. The Device Viewport Manager in Create lets you preview and verify how your content wraps, stacks, and reflows across different screen sizes.
This allows you to preview your layouts on standard screen sizes or custom-defined organization hardware (such as company-issued tablets or phones).
Using the Viewport Dropdown
To switch your view, click the Desktop, Tablet, or Mobile viewport icons in the top toolbar.
To see specific device presets, click the dropdown arrow next to the viewport icons to open the PRESETS menu:
- Desktop (auto): An auto-sizing option where your project takes up the full width of your browser screen, leaving no blank space on either side.
- Tablet: Displays your content at a standard tablet width (defaults to 900px if no custom preset is active).
- Mobile: Displays your content at a standard mobile width (defaults to 600px if no custom preset is active).
Custom Devices (Admins Only)
To maintain design consistency and simplify device management across your organization, only account administrators can create, edit, or delete custom device presets.
Once an admin saves a custom preset, it is instantly tied to the account's profile and becomes available in the dropdown for all content authors across all projects.
How to Add a Custom Device (Admins Only)
- Click the dropdown arrow next to the viewport icons and select + Add custom device.
- In the modal, fill in the following details:
- Name: Enter a recognizable name (e.g., Company Phone). This field has a 25-character limit.
- Width: Input the width in pixels.
- Height (Optional): Input the height in pixels. Providing a height adds a realistic device frame around the canvas to help you visualize physical screen boundaries.
- Click Add device to save.
Managing and Deleting Presets (Admins Only)
An organization account can have a maximum of 10 custom device presets. Admins can manage them at any time:
- Open the dropdown and select Manage custom devices.
- In the management modal:
- Click the Pencil icon to edit a preset's name or dimensions.
- Click the Trash icon to permanently delete a preset.
Preview Availability
All custom device viewports and presets are fully available anywhere you can preview your project, ensuring a seamless design and QA experience.