Changing Your Canvas Size

2 Minute read

Reading Time: 2 minute

The default desktop 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, select ‘Canvas’ above the top left corner of the canvas and then you’ll see your Canvas Settings options populate in the design tab of the Inspector Panel:

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

Within the Browser Scaling dropdown you can select one of three options, Scale to Fold, Full Width, and No Scaling.

If you choose Scale to Fold, the fold line that you set 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.

Full Width will have your experience fill the entire browser window, and No Scaling will not have your experience scale to the browser at all.

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 and will also scale down to whatever screen size they are being viewed on. However, you can optimize your experience for mobile and tablet viewing by creating mobile and tablet variants from the Global Layout panel in the top left corner of the studio.

If you are designing for mobile or tablet, the default width will be 540 pixels and 768 pixels, respectively. These widths are ideal for viewing Ceros on those devices, but these can be edited directly in the studio as well.

Common Aspect Ratios

  • 1024 x 578 (16:9)
  • 1024 x 768 (4:3)
  • 1020 x 850 (6:5)
  • 1024 x 1024 (1:1)
  • 1020 x 680 (3:2)
  • 1024 x 512 (2:1)

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.

Was this helpful?

You already voted!
18 out of 29 people found this helpful