Banner Image cropping at menu

Site URL: https://lrcss.com/stone-soup-2020

Hey all,

The banner image on my page works fine in squarespace but when I exit to view the site on my browser it crops in the menu. Anyone have a solution?

I'm interested in this same thing. My graphic person is asking me for the "right" size to make images for the banner so that the banners consistently show on all size screens from large desktops to mobile. Squarespace seems to always try to crop things, and you can't make it look good for all.

Hi @lrcss and @dave154304,

It’s important to note that banner images will always experience some cropping. This is the nature of how banners are designed and how they work with your site's built-in responsive design - the banner area will resize and crop differently depending on the size of the browser window viewing your site. That's why we usually recommend using abstract patterns and images without text or borders as banner images. While there isn't a way to completely prevent banner cropping,  you can use focal points to center the banner on the most important part of the image. Check out this help article for more specifics:

Using focal points to center images

I am also including some other great guides on using banners images, which outline some good tips:

Adding banner images - Image formatting tips

Troubleshooting cropping issues