Reduce mobile banner image

Site URL: https://www.martaraptis.com/

Hello, I have a banner image that looks good on my laptop but terrible on mobile. Can someone please help me reduce the size of it so it fits nicely on mobile? 

thanks so much 

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.

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;
}
}

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! 

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! 

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;
}
}