Jump to content

How to prevent banner cropping on mobile site?

Recommended Posts

  • Replies 1
  • Views 814
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.