How can I effectively crop an image in CSS for mobile?

[MyEcomAgent]

Hi guys,

im trying to crop an image in CSS for mobile, cause it has too much free space.

Im trying to crop it, so the blue line im pointing at on the bottom, is at the red line im pointing at.

This is what i´ve try´d:

@media screen and (max-width: 749px) {
  img {
    height: 450px;
    margin-top: -100px;
  }
}

Greetings

Enes

[MyEcomAgent]

myecomagent.com
PW: 2023

[webwondersco]

@MyEcomAgent . could you please explain in detail? I have checked your website but did not get your point what you want.

[MyEcomAgent]

You have to view it in mobile version, than you can the big gap there.

There is just too much empty space below and above the pink image.

I couldn´t get rid of it with margin, padding or height. Maybe im doing something wrong xD

[MyEcomAgent · Accepted solution]

Okay i got it, this is what i´ve done:

a {
  color: white;
}
@media screen and (max-width: 749px) {
  .banner__content {
    height: 300px;
    margin-top: -110px;
  }
  img {
    height: 450px;
    margin-top: -110px;
  }
}

[PageFly-Richard]

Hi @MyEcomAgent 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

@media screen and (max-width: 767px) {
  .banner__content {
    height: 300px !important;
    margin-top: -110px !important;
  }
  img {
    height: 450px !important;
    margin-top: -110px !important;
  }
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly