The ScrollX is a responsive format and the creative adapts seamlessly in devices with a small screen to large screen.

As the ScrollX is a full screen format, it is best to design the ScrollX for a resolution of 375 x 667px. Also, as the designs are required to be double the resolution, to cater to devices with a higher ppi, the design file would actually be 750 x 1334 px.

Now when you access the template link, you will see that there are 3 PSD templates available. This is to help with the design in different scenarios.

Do keep in mind that in 90% of the scenarios, one design is sufficient as the creative when build appropriately, with layers, is responsive and will adapt to the different screen sizes.

Use the 320 x 480 (640 x 960 px) template when the sites where the ad is going to render tends to have a fixed header and a footer ad as well. Otherwise just use the 375 x 667 (750 x 1334 px).

It is also better to use the 375 x 667 (750 x 1334 px) as that's the most popular screen size and now, screens are just getting larger from there. So, the difference between this design and the larger screen is less and so the creative would adapt well for the larger screens as well.

The Canvas page for ScrollX opens up with a dimension of 320 x 480px even though the recommended design spec is 375 x 667 (750 x 1334 px).

This is because 320 x 480 is the lowest screen size to cater for. So, if the design created can be made to fit in this size, once the assets are brought in separately, then you know the ad will render properly for the lower screens as well.

If you don't wish to do so, you can go ahead and change the page dimensions from the property panel on the right tab to 375 x 667 and then arrange the assets. As mentioned previously, the creatives are responsive, so even by doing this they will still downsize when required when rendered on a lower resolution screen.

Page Property - Change Page Dimension

Firstly, do check if the creative is being made with separate layers so that the design can adapt to different screens. Second, is to check if the responsive controls are the most appropriate for the required output. If post this, the creative is still not rendering as expected on the large screen devices, it would be best to create a 'New Breakpoint'.

Create a new breakpoint

What this does is, to provide a new design reference for the creative. So whenever the creative is being rendered on a large screen device, it would reference back to this new breakpoint and then render this design accordingly.

A PSD template for the larger screens is also provided.

It is good to consider the center of the canvas as the safe area leaving 20 pixels from all sides. This will enable you to keep your ad content from being cut off by device screen resolution.

The rendered creative appears with a top and bottom bar. You can customize the text and color of the bars from the Studio canvas.

Top Bar in the ScrollX creative

Assets:
You can work with multimedia assets such as text, images, and videos in Bonzai Studio.

While working with images, we recommend you to do the following:

While working with videos, we recommend you to do the following: