How to have banner show more of the image?

Site URL: https://sunflower-accordion-z2d3.squarespace.com/residential

Hi there,

We're working on this site - https://sunflower-accordion-z2d3.squarespace.com/residential

Password: EnergystorE

The top image is very zoomed in and cropped - can we use come custom css to see more of the image? Full picture attached for reference. 

Thanks for any advice!

Anna 

Add to Design > Custom CSS > Then save & reload the site

/* Residential - banner */
@media screen and (min-width:901px) {
body#collection-609d14f62b17935c4187aed6 {
.Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
section#res-banner {
    min-height: 90vh !important;
}}
}

Hi @tuanphan Thanks for this - it's fixed the image but there's now a lot of padding / black space - I've attached a screenshot. Is there a way to sort this? 

Thanks @tuanphanthis worked great!

Is there a way to achieve similar on mobile?

Thanks!

I don't see black bar. Did you solve?

With mobile, use this code

/* Residential - banner */
@media screen and (max-width:640px) {
body#collection-609d14f62b17935c4187aed6 {
.Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
section#res-banner {
    min-height: unset !important;
	height: 30vh !important;
}}
}

@tuanphan

I have the same issue. with the picture banner of the home page.

Could you please help me to fix this. 

The website is online : https://www.studiopilatesauray.com/accueil

Many thanks

On 2/21/2022 at 4:46 PM, ElizabethM said:

@tuanphan

I have the same issue. with the picture banner of the home page.

Could you please help me to fix this. 

The website is online : https://www.studiopilatesauray.com/accueil

Many thanks

Just answered your email with new code. You can try

You can also consider using smaller image