OverbiteX (Twitter) banner guides
These guides answer the questions people ask about the X header, using the device numbers behind the Overbite editor. Each guide takes one question. If your banner already looks wrong on a phone, start with the guide on banners cut off on iPhone.
Which guide do you need?
- Twitter banner size. What size should my banner be, and how much of it will people see? The 1500×500 spec, accepted formats, file size, and the width each device shows.
- Twitter banner safe zone. Where can I put text so that nothing covers it? Diagrams per device and the largest rectangle that stays clear on all five.
- Why your Twitter banner is cut off on iPhone. Why did the app cut off my banner, and how do I repair it? Why the X app on the iPhone 13 cuts the sides, and how to repair a banner.
- Free Twitter banner templates. Can I start from a finished design? Eight editable starter designs, plus a safe zone overlay as PNG and SVG.
What do the numbers show?
In the X app on the iPhone 13, the banner keeps its full height and loses its sides, about 125 pixels from each side of a 1500×500 banner.
The profile picture, the notch or Dynamic Island, the status bar and the phone buttons cover more. Together with the cut sides, they hide 45% of the banner area on at least one of the five devices mapped here. On measured devices alone the figure is 37%. The largest rectangle that stays clear on all five is 630×360 pixels. The iPhone Pro estimate sets that size. On measured devices alone, meaning web, tablet and the iPhone 13, the largest clear rectangle is 647×397 at x 395, y 103.
The iPhone Pro and iPhone Pro Max numbers are estimates, with iPhone 13 layout rules applied to those screens. Android was not measured. The page on how these numbers were measured says which is which.
Where should you go after reading?
You can apply all of this by hand from the guides, or skip the arithmetic. The editor draws the covered areas on the canvas and warns you when a layer sits under one of them.