Hi there,

Thanks for sharing this, and you’re not alone! Even when using the recommended image dimensions, banners don’t always render exactly as expected on the first try. This isn’t unique to Bettermode, the same happens in tools like Canva, Google Sites, or even email builders. It often comes down to how different systems handle responsive layouts, cropping, and scaling.

Here’s what’s happening and how to approach it:

The banner image you upload needs to match the aspect ratio that’s currently set in your Posts Block or Post Banner display settings, not just the raw dimensions. If the aspect ratio is off (too tall, too narrow, etc.), the image may stretch or crop in unexpected ways.
Even a small variation in aspect ratio can lead to edges being cropped or blank spaces appearing, especially on mobile vs. desktop.

Tips to get the best fit:

Start with a larger, high-quality image; it’s easier to scale down than to upscale without losing quality
Upload the image and check how it looks on desktop and mobile
If it’s not quite right, try resizing the original to a few different versions (e.g., trim height or adjust width slightly), and test again
Focus on center-weighted content (avoid putting important details near the edges of your banner, as they’re the most likely to get clipped)
Stick to standard aspect ratios like 16:9, 4:3, or 3:2 when in doubt

Why testing is sometimes the only path:
There are many layout combinations in Bettermode depending on your Posts Block configuration, post type layout, and screen size. So even with the right starting size, fine-tuning by trial and error is often the best way to lock in a version that looks great.

Banner size