Skip to content

Aspect ratio is wrong

A stretched logo, an image with black bars around it, or content that lands on its side on the screen. Three typical causes.

1. The screen hangs in portrait, the content is landscape

The screen hangs upright, but the template, image or video was made for a landscape screen. The content does not fit.

Fix: choose a template marked as portrait or both. The templates library shows which orientations each template supports.

For single images: upload a variant in the right orientation (1080×1920 for portrait, 1920×1080 for landscape).

2. Mismatch between content format and zone

A 16:9 video in a 4:3 zone gets black bars. A square image in a wide zone is padded left and right with the background colour.

Fix: match the zone ratio to your content, or change the fit setting of the content item:

  • Scale to fill: fills the zone completely, possibly cropping
  • Fit and center: shows the full content, possibly with bars

Both have a use case: for a logo you often want fit and center (no cropping), for an mood image often scale to fill (no empty space).

A data app can carry a portrait layout next to its landscape one; a portrait screen then shows the portrait one. If you rotate such a screen, publish again.

3. The orientation is set wrong

A screen hangs in portrait but shows landscape content (or the other way round), or the content lands on its side.

Fix: set the orientation in gibeon.io itself, per screen: Screens → pick the screen → Orientation. Choose Landscape or Portrait, and set Rotation direction to Reversed if the screen hangs the other way. The change shows on the screen within a few seconds and you do not need to publish, except for a data app with a portrait layout: then you publish again. Always set the orientation in gibeon.io, not in the system menu of the device itself, so only one layer rotates.

4. An external screen rotates the image a second time

Does gibeon.io run on a box connected over HDMI to a TV or monitor, and does that screen have its own portrait or rotation setting? Then the screen can rotate and stretch the already correct image once more. The image reaches the panel distorted.

Fix: let gibeon.io do the rotation (set the orientation in gibeon.io, see above) and put the external screen on its landscape source with picture mode “Just Scan” or “1:1” (no overscan, no “Fill” or “Stretch”). One layer may rotate, not two. Do you want the screen’s menus rotated? Then use that screen’s separate menu orientation and leave the source orientation on landscape.

Common questions

My 4K content looks blurrier on the screen

That is not an aspect ratio problem but a resolution problem. The player scales your content to the actual screen resolution. Only supply 4K content if the screen is 4K too. Otherwise 1080p is enough and keeps your upload time short.

My template looks different on another screen

Templates scale with the zone size. A split-screen template on a 4K screen and on a 1080p screen both show all the content, but the pixel size of the text differs. That is expected behaviour. Use vw units in custom CSS to scale relatively.

Was this helpful?