Header Maker

Your profile picture also sits over the bottom-left of this header once it's live, on top of whatever the mobile crop already trims — so the safe zone here is really two overlapping concerns, not one. Content placed in the top-right quadrant is the safest bet across both crops and the avatar overlap.

The header renders at full width on desktop but gets noticeably narrower once the mobile crop trims both sides, which is why toggling between the two variants above before exporting matters more here than for a square profile picture where the crop is far more predictable. A design that only accounts for the desktop view risks losing a logo or key text entirely on mobile, where a large share of profile visits actually happen.