banner image zoom, mobile view

Site URL: http://www.empathystories.org

hello! i'm noticing that the banner images of my website are very zoomed in in mobile view. is there a way to zoom out so the images aren't so close up? thank you!

i don't want to zoom out all the way, just enough to see both people's faces in the home image.

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
section#home-a {
    min-height: unset !important;
    height: 200px !important;
}
}

13 hours ago, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
section#home-a {
    min-height: unset !important;
    height: 200px !important;
}
}

 

thanks for offering this idea @tuanphan 

when i use this code it zooms out all the way in mobile view and looks like this:

here's how squarespace is automatically zooming in: 

this is what i would like it to look like:

can this be achieved?

thank you!

hi @tuanphan

i'm still wondering whether we can zoom into the image like the picture i sent above, that is my preference.

but in the meantime i was able to adjust your code to get a workable option until we can figure that out. when i do so there is a black bar along the top of the image. can we move the image up so the black bar is not there?

/* zoom mobile banner */
@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
section#home-a {
    min-height: unset !important;
    height: 260px !important;
}
}

On 8/9/2022 at 2:16 AM, fc1 said:

hi @tuanphan

i'm still wondering whether we can zoom into the image like the picture i sent above, that is my preference.

but in the meantime i was able to adjust your code to get a workable option until we can figure that out. when i do so there is a black bar along the top of the image. can we move the image up so the black bar is not there?

/* zoom mobile banner */
@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
section#home-a {
    min-height: unset !important;
    height: 260px !important;
}
}

Try adjust this number

top: 100px !important;

thanks! i created a new image to get the zoom i wanted.

Hi! I have the same issue, and I tried the code @tuanphan used but it did nothing for me.  

Attached is the desktop and mobile view.  I want the mobile view more zoomed out so we can see the model's legs. Can someone please help? Thanks!

On 2/13/2023 at 8:03 AM, iponkk said:

Hi! I have the same issue, and I tried the code @tuanphan used but it did nothing for me.  

Attached is the desktop and mobile view.  I want the mobile view more zoomed out so we can see the model's legs. Can someone please help? Thanks!

Hi,

What is site url?