Jump to content

Mobile: how to change focal point of image banner

Recommended Posts

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

 

 

 

 

 

Edited by AnnaOS
Link to comment
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;
    }
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
  • 4 weeks later...

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!

51600623_ScreenShot2021-06-29at11_52_33AM.thumb.png.4df085d359db6cdf0486ad01ca586b41.png

Link to comment
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!

51600623_ScreenShot2021-06-29at11_52_33AM.thumb.png.4df085d359db6cdf0486ad01ca586b41.png

Hi. What is site url?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

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? 

image.thumb.jpeg.b544a043a3e90827c73489f5aae780dc.jpeg

Link to comment
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? 

image.thumb.jpeg.b544a043a3e90827c73489f5aae780dc.jpeg

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

image.png.d165020d627344f95d6650df0d651622.png

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.