Jump to content

Reduce mobile banner image

Recommended Posts

Hi @Marta, this is a pretty common design challenge for any website with background images. Background images are set to fill a space on your website defined by the foreground content in the section, usually a minimum height and the screen size that the website is being viewed on. With this in mind and the fact that your background image needs to look good as a letterbox ratio of may 3:1 on a very wide screen, as a square (1:1) on tablet screen, and a portrait image (1:3) it is often good to pick an image that will look good when cropped in these ways and every way in between. Not to say this is necessarily easy!

Here are two possible solutions depending on how you'd prefer to solve this.

1: Replace the background image for a completely different one on mobile:

 

2: Prevent the background image from being cropped no matter what the screen size:
https://www.will-myers.com/articles/prevent-background-images-from-cropping-in-squarespace-71
This is potentially a good solution, but any content that you have in the section will potentially stop this from working.

I hope this helps you towards a solution that works for you.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

You can also try this code to Design > Custom CSS

/* Mobile top banner */
@media screen and (max-width:767px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 10px !important;
}
section#home-banner {
    height: 300px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 9/29/2022 at 10:22 PM, tuanphan said:

You can also try this code to Design > Custom CSS

/* Mobile top banner */
@media screen and (max-width:767px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 10px !important;
}
section#home-banner {
    height: 300px;
}
}

 

@tuanphan thanks for the code, it's quite close! However, now I'm getting a black background behind my main tagline, and the tagline also gets cut off. See attached screenshot. Any ideas to fix that? 

thanks so much! 

Screenshot 2022-10-01 165507.jpg

Link to comment
On 10/2/2022 at 3:55 AM, Marta said:

@tuanphan thanks for the code, it's quite close! However, now I'm getting a black background behind my main tagline, and the tagline also gets cut off. See attached screenshot. Any ideas to fix that? 

thanks so much! 

Screenshot 2022-10-01 165507.jpg

Try this new code

/* Mobile top banner */
@media screen and (max-width:767px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 10px !important;
}
section#home-banner {
    height: 180px;
}
    div#block-yui_3_17_2_1_1655215461081_2516 {
        display: none;
    }
    div#page-62a74b005d5db60eca5fa90d {
    position: relative;
    top: -60px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.