Changing Your Experience Size


Changing Your Experience Size

The default Experience Size in Ceros is set to 1280 x 720 pixels. This 16:9 aspect ratio is ideal for displaying content on a laptop, however, you can change it to whatever size best for your needs. Use this cheat sheet to pick a size that works for you.

Adjusting the Overall Experience Size

In order to change your overall Experience size, use the menu at the bottom left of the Studio:

Canvas Size

The maximum Experience size for the fold area is 5120 wide x 5120 tall while the minimum experience size is 50 x 50px.

In addition, you can also create long, scrolling pages within an Experience using the Page Height. Individual pages can be up to 100,000 pixels tall (although that may not be the best user experience).

The fold line for individual experiences specifies the amount of content that will appear in the viewport initially. All of the content above the fold line on a long scrolling page will fit vertically in the browser window initially. Everything below that line will be seen when the visitor scrolls.

Keep in mind in order to accommodate retina screens you should export any assets from Photoshop or another design platform at 2x their intended size in Ceros. This enables the experience to scale up for retina devices without sacrificing clarity.

Scaling Up and Down

Ceros Experiences will scale to fit whatever container they are embedded into. Make adjustments to the canvas dimensions and fold height to ensure your experiences view well across different devices.

Common Aspect Ratios

*This image is scaled and does not represent actual dimensions.

This image is scaled and does not represent actual dimensions.

Note: Avoid using extreme ratios such as 111:88. Scaling those can lead to unexpected results by browsers when the math doesn’t add up.

To learn more about the most common screen sizes, check out this article.