Social MediaLesson 269Free preview

Resize to X Header

This lesson is part of Web Developer Tools · All levels

Summary

The X profile header uses a 1500 x 500 pixel wide banner with a ratio of 3:1. Profile photos and interface elements cover some areas, especially the lower left side, so design should take into account the closed section. Put the main message in the middle or right with enough contrast. Low-resolution banners will look blurry when opened on the big screen.

Key points

The header X reference dimensions are 1500 x 500 pixels
The 3:1 ratio produces a wide and a short banner
The avatar on the bottom left covers part of the banner
The main message should be in the middle or right.
Use the resolution to avoid blurring on the desktop

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.