Help- Home page image not working on mobile devices

[MaiseyDaisey]

Hi, I changed the banner image on my home page, last night. I wanted to make it more personalised by adding a photo of maisey and stress why our business is different. But now the image is not fitting to a mobile screen, Can anyone please help?

[BiDeal-Discount]

Hi @MaiseyDaisey 

can you share your store url & password (if applicable) to let me check & suggestion you the solution?

[MaiseyDaisey]

maisey-daisey-ltd.myshopify.com

[BiDeal-Discount]

You want it like this one mobile?

[MaiseyDaisey]

Yes please

[MaiseyDaisey]

I've also just noticed its cutting the top of maiseys head off on desktop?

[BiDeal-Discount]

because your image is ractaggle so on small screen it also is rectangle

[BiDeal-Discount]

or you want it like this 

[MaiseyDaisey]

Yes like that please

[BiDeal-Discount]

yeah Let replace my suggest code above with this one:

@media screen and (max-width: 749px) {
    main .banner__media img {
        object-position: 75% center;
    }
}

[MaiseyDaisey]

Thats worked thanks. 2 questions

1. can i make the text smaller on the mobile version?

2. on the desktop how do i stop the top of her head being cropped off?

[BiDeal-Discount]

You can try add more this Custom CSS code for those 2 issues:

@media screen and (max-width: 749px) {
  .banner__content .banner__heading {
    font-size: calc(var(--font-heading-scale) * 3rem);
  }
}
@media screen and (min-width: 750px) {
  main .banner--medium:not(.banner--adapt) {
    height: 100dvh;
  }
}

[MaiseyDaisey]

Do i replace the previous code you gave me, or add it underneath?

[BiDeal-Discount · Accepted solution]

Let add it underneath

[MaiseyDaisey]

I have done that. The text still goes over the photo on mobile. If theres nothing i can do about that?

[BiDeal-Discount]

it's not over of picture at my phone

[BiDeal-Discount]

Let add this custom css code to the end of file base.css:

@media screen and (max-width: 749px) {
   main .banner__media img {
      object-fit: contain;
    }
}
    

[MaiseyDaisey]

So i dont remove anything at the bottom?

[BiDeal-Discount]

I didn't got your point

[MaiseyDaisey]

Its worked, but is there no way to make the image bigger so the writing goes across or just below her face?