How to prevent banner cropping on mobile site?

Site URL: http://www.fluffstory.com

Hi, 

My banner image is getting cropped off on the mobile site. How do I prevent that from happening so that the viewer can see the whole banner image (similar to how it is seen on the web view) on the mobile site? 

Thanks!  

Squarespace is always going to try to make a background-image cover the visible area, so it's probably not the easiest way to do this by using a background image. especially as there's no "real" content in the section so SQS doesn't know what to focus on. It might be better to have the key information like the "Buy a .... FREE" as text over the peach-coloured patterned background, that way SQS will always prioritise the text, layout correctly and it's also more accessible.

I'd really recommend going down that route. if you particularly want the three dog-collars to fit in then I'd separate out those elements from the background image and have three elements: text, collar image (inserted as inline image block) and background image of peach coloured pattern.

however, that may not be what  you want to do, so you can do a bit of css to change this. put this in your custom css and this will reduce the height of the containing section on mobile, which in turn will bring in your background image. 

@media screen and (max-width:768px) {
    section[data-section-id="60d89272e71eb125bdceea14"] {
        min-height: 45vh !important;
    }
}

• 768px is iPad width, so this height change will kick in at less than that
• it targets that one section using the section id (you can find this with the squarespace Id finder chrome extension)
• vh are relative units for Vertical Height, so it will be slightly different from phone to phone. you could try different pixel values using 'px'  which may give you more consistency, but squarespace will size most things relatively so better to try to use vh.

this will help, but I really would recommend reconsidering how you're using this background image in line with the comments at the start of this answer.

Either way, hopefully you'll be able to sort it now.