Fullscreen Ad

When developing a fullscreen creative, especially for mobile, you should consider the following.

• Not all devices have the same aspect ratio and screen size.
• Mobile devices have 2 views (portrait and landscape).

If you create static content like an image for your fullscreen ad, some content may fall outside of your device viewport or there might be empty space visible in your viewport. 

In the following example we set the background-size to cover. We used a 621x1104 px image to cover most mobile devices.

Because the background-size is set to cover, the image will scale as large as possible and maintains image aspect ratio (meaning the image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

If you use the property contain, the image will scale as large as possible and maintains image aspect ratio (meaning the image doesn't get squished). The image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background colour.

In the "helper" images you can see a red frame, to show you what part of the image is visible on a smartphone. The green lines show where the save area is to place important content. This is smaller than your total screen size because all mobile browsers have an in-app menu bar and also navigation bars at the top and bottom, that also change in size depending on where you are scrolling.

Please view your creation on real devices to check what part of your creation is visible.
The device emulator does not always display the correct available content area.