Mobile: how to change focal point of image banner

Site URL: https://earthboundbabies.squarespace.com/

Hiya, I have edited css so that the top image banner on this page: https://earthboundbabies.squarespace.com/hypnobirthing-faq s shorter in mobile view. I like the height of it, but I don't like how it's cropping her face. I made the focal point higher in the image format box (on desktop) but it's not changing for mobile. 

Any suggestions greatly appreciated 🙂

password: hello123

CSS I used:

@media screen and (max-width:640px) {
section[data-section-id="6005c075dea472688fcc70eb"] .section-background img {
    width: 100% !important;
}
}

@media screen and (max-width:640px) {
section[data-section-id="6005c075dea472688fcc70eb"] {
    min-height: 60vh !important;
}
}

Hi. I don't see image banner on homepage. Can you share link to exact page?

Hi @tuanphan

The page is here:

https://earthboundbabies.squarespace.com/hypnobirthing-faq 

Sorry, I realised I had another code under it that made it disappear. Fixed that. But still have issues with focal point. Ideally The mvh would be around 40 or 50.

Thank you,

Anna 🙂

On 3/23/2021 at 4:43 PM, AnnaOS said:

Hi @tuanphan

The page is here:

https://earthboundbabies.squarespace.com/hypnobirthing-faq 

Sorry, I realised I had another code under it that made it disappear. Fixed that. But still have issues with focal point. Ideally The mvh would be around 40 or 50.

Thank you,

Anna 🙂

Add this CSS

@media screen and (max-width: 767px) {
    section[data-section-id="6005c075dea472688fcc70eb"] {
        min-height: 40vh !important;
        margin-top: 25vh;
    }
}

Oops sorry I missed this @tuanphan thanks so much 🙂

popping on this thread because I'm having a similar problem. Looking to bump the focus of this image up a little bit to have more sky included. I've messed with the position coding for a while now and can't seem to get things to shift up a bit. Any ideas? Also looking to make the nav bar transparent for mobile if possible. Thanks!

On 6/29/2021 at 10:54 PM, SouthernSunEvents said:

popping on this thread because I'm having a similar problem. Looking to bump the focus of this image up a little bit to have more sky included. I've messed with the position coding for a while now and can't seem to get things to shift up a bit. Any ideas? Also looking to make the nav bar transparent for mobile if possible. Thanks!

Hi. What is site url?

Hello, I am having problems with the focal point as well. On mobile view, I set the focal point of the main banner to center the guy's face. But when I save it and view live, the guy would go off center again. Is it a bug? or can it be fixed with a code? The url is https://www.mystorage.vn/ Thank you!

Hello, it seems the focal point is not working on image blocks when viewed on mobile? On mobile view edit, I set the focal point of the main banner to center the guy's face. But when I save it and view live, the guy would go off center again. Is it a bug? or can it be fixed with a code? 

On 3/28/2023 at 1:30 PM, Miicherey said:

Hello, it seems the focal point is not working on image blocks when viewed on mobile? On mobile view edit, I set the focal point of the main banner to center the guy's face. But when I save it and view live, the guy would go off center again. Is it a bug? or can it be fixed with a code? 

You can add this to Design > Custom CSS to adjust it

/* Mobile - Home - Top Image */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1679909308335_12607 img {
    object-position: 80% 50% !Important;
}
}

ps I like your service, I used to learn more & intend to use 😆

Hi Sorry for the late revert! I have tried it now and it works amazingly.

Ooh I see! What a small world 😆 I'll let my client know! Thank you so much for the help 😊

Hi, I am trying to change the focal pint on the header gallery on my home page, so it centres on the left-hand image?

https://bellflower-opossum-txyn.squarespace.com/
studionh_nh

On 7/19/2024 at 7:37 PM, maboli said:

Hi, I am trying to change the focal pint on the header gallery on my home page, so it centres on the left-hand image?

https://bellflower-opossum-txyn.squarespace.com/
studionh_nh

You can use this code to Custom CSS

@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow-list img {
    object-position: 30% 50% !important;
}
}

Thank you!