When you upload a cover image, different learners will see different parts of it depending on their screen size. This article explains why, and shows you exactly what to upload so your header looks good everywhere.
TL;DR
Default and Promo headers: upload a 3:1 image, ideally 2400 × 800 px (or any multiple of 1200 × 400). Max 6 MB. Keep the important stuff inside the centre ~744 × 550 px safe zone. Don't bake text or logos into the image itself.
Hero header: the image slot is fixed at 520 × 440 px (≈ 13:11). Upload at that size, or at 1040 × 880 px for crisper rendering on retina screens. Max 6 MB. Text or logos on the image are fine here, because the image sits beside your copy instead of behind it.
Promo card thumbnail: JPG or PNG, max 800 KB, minimum 360 × 200 px.
Why the same image looks different on different screens
You only upload one image. We display it as the background of the header box, so on narrow screens we trim the sides to fill the height, and on very wide screens we trim the top and bottom to fill the width. The centre of your image is always visible. The edges come and go.
Device | Header box | What happens to your image |
Mobile | 375 × 400 | Scaled to fit the height, so left and right are heavily cropped |
Tablet | 768 × 440 | Scaled to fit the height, with some side cropping |
Desktop | 1440 × 440 | Scaled to fit the width, with a slight top and bottom trim |
Wide | 1920 × 440 | Scaled to fit the width, with a bigger top and bottom trim |
This behavior is the same for the Default and Promo header types. The Hero header works differently and is covered further down.
Safe Zone (Default and Promo)
If you combine every device's visible area, you get a rectangle in the middle that is always shown on every screen. That's your safe zone.
Safe zone size: the centre ~31% of the width and ~69% of the height of your uploaded image. On a 2400 × 800 source that's roughly 744 × 550 px in the middle.
Rules of Thumb
Put your focal subject inside the green box. Anything outside may disappear on some device.
Leave breathing room in the centre. Your course or collection title sits on top of that area, and so does the Start / Resume button (for courses) or the price tag (for collections when Show price tag is on).
Don't bake text or logos into the image. They will be overlapped by the title, the button, or the subtle darkening gradient we apply for legibility.
Prefer darker, low-detail imagery. The title is white and sits over a gentle dark gradient. Busy or bright-centred images make it hard to read.
Keep course and collection titles short. Long titles wrap onto multiple lines and crowd the header, especially on mobile.
Header type: Default
This is the standard header that ships with every course and collection.
What to upload
Size: 2400 × 800 px is ideal, but any 3:1 image works (for example 1200 × 400 or 3000 × 1000).
Max file size: 6 MB
Format: JPG or PNG
Keep key content inside the centre safe zone shown above.
What appears on top of the image
Your school logo (if one is set)
The course or collection title in white
The Start / Resume / Continue button, for courses
A price tag for collections, when Show price tag is turned on
A subtle dark gradient is applied automatically so the white title stays readable
Header type: Promo
The Promo layout uses the same cover image rules as Default. What's different is that a feature card sits on the right side, and on desktop and wide screens it stays in place as the page scrolls.
What's different from Default
The right side of your image is dead space on desktop. The feature card covers roughly the right 28% of the viewport and stays there while the user scrolls, so compose your image toward the left.
The left side gets a description under the title. Unlike Default, Promo shows a header description below the course or collection title. We recommend writing one, because an empty left side can feel sparse next to the busy card on the right.
Your logo and price tag live inside the card, not on top of the image. The card also holds the features list and the call-to-action button.
On mobile, the card dominates and the cover is mostly hidden. The card is not sticky on phones. It sits directly under the title and covers most of the cover image. As the user scrolls, the card scrolls away with the rest of the content.
Header description (Promo)
Maximum length: 200 characters. Anything beyond that is cut off in the preview.
Keep it clear and engaging. This is often the first thing a visitor reads.
Card thumbnail
The thumbnail at the top of the Promo card is a separate image. It never gets overlaid by anything, so it's the safe place to put branded artwork.
Supported formats: JPG or PNG
Max file size: 800 KB
Recommended minimum size: 360 × 200 px
Header type: Hero
The Hero layout puts your image in a fixed slot beside your text instead of behind it. Nothing overlaps the image, and it behaves like the hero section of a landing page.
What to upload
The image slot on desktop is 520 × 440 px (≈ 13:11 aspect ratio).
Upload at 520 × 440 px, or at 1040 × 880 px for sharper rendering on retina and high-density displays.
Max file size: 6 MB
Minimum: 282 × 220 px
What appears beside the image
The text side is consistent across every Hero header and shows the same set of elements:
Your school logo (if one is set)
The course or collection title
A header description (up to 200 characters)
Call-to-action buttons (Start, Resume, or pricing actions)
You can choose whether the image sits on the left or the right. The text automatically flips to the opposite side.
On mobile
The image stacks on top of the text at full screen width. The height drops to 400 px and the width adjusts to the device. Because the slot gets narrower but the height is fixed, wider source images may be cropped from the sides on small screens. Keep your subject roughly centered horizontally for safety.
Why this header is different
Because nothing overlaps the image, Hero is the one place where text, logos, product shots, or other busy artwork on the image are fine. Treat it more like a magazine photo than a wallpaper.
Quick comparison
| Default | Hero | Promo |
Recommended upload | 2400 × 800 px | 520 × 440 px (or 1040 × 880 for retina) | 2400 × 800 px |
Aspect ratio | 3 : 1 | ≈ 13 : 11 | 3 : 1 |
Crops per device | Yes, on both axes | Only on mobile width | Yes, on both axes |
Text or logos on image | Avoid | Fine | Avoid on cover, fine on card thumbnail |
Overlays on the image | Title, button, price tag, logo, gradient | None | Title, description, gradient (card sits beside) |
Extra asset | None | None | Card thumbnail, 360 × 200 px min, 800 KB max |
Troubleshooting
My image looks fine on my laptop but cut off on my phone.
That's expected on Default or Promo, because mobile shows only the centre ~31% of the width. Move your focal subject closer to the horizontal centre of the image, or switch to the Hero header, which does not crop horizontally on desktop.
The top and bottom of my image is being cut off on big monitors.
Wide screens trim the top and bottom. Keep important content within the middle ~69% of the height, or leave empty space at the top and bottom of your image.
My title is hard to read.
The image is probably too bright or too busy in the centre. Pick a darker image, add a dark area in the centre, or switch to the Hero header, where the title sits beside the image instead of on top of it.
The image looks blurry.
Upload at the recommended size or higher. A 2400 × 800 JPG will look sharp on every screen, including retina and 4K displays. Don't stretch a small image up to meet the recommendation, because it will look soft.
The Promo cover barely shows on my phone.
That's by design. On phones the feature card sits directly under the title and covers most of the image. If you want the image to be more prominent on mobile, use the Default header instead.