3x4 Images (Mobile and Tabs)
In tabs the padding area is less than 5% on left and right
20% padding on left and right sides to support smoothly on all mobile devices
40% (width)of text area (text will appear over this area of your image). The height of text area (blue) can grow vertically based on the text content
Left-aligned Content (text - title and sublime) | Right aligned content |
| 
|
16x9 images (Desktop and Laptops)
12% top and bottom padding
Less than 5% of left and right padding
The text area is 40% of the image space (width) - the length will grow based on the content size
Left-aligned Content (text - title and sublime) | Right aligned content |
| 
|
1x1 images (Other ratios like minimized screen sizes and square monitors)
This depends on screen size (to optimize to closest size)
For perfect square screens there is no padding
The text area is 40% of the image space
Tip: Visualizing Your Image on Different Devices
To see how your image will appear across various devices, follow these steps:
Download the attached files for reference.
Overlay the images onto your chosen design by setting their transparency to a low value (less than 100).
Adjust the transparency to preview the look and feel.
Once satisfied, remove the overlay layer.
This approach provides a quick way to understand how your design will appear on different devices.