How to resize image height just in mobile

Site URL: http://www.okayokayla.com

I am trying to resize the image on the first page of my site so the height fits in the mobile browser. I have tried different codes, but nothing has worked to change the height (medium size fits perfect in testing) See examples:

Desktop View is perfect:

Mobile View Height needs to shrink to fit:

Hello,

Try this:

section[data-section-id="60ac2acc4bc21d6a986068b1"] {
min-height: clamp(0px, 56.25vw, 100vh);
}

Hope this helps!

-Dan

@Wolfsilon Thanks for the reply. I applied the code, but no changes at all.

Try:

section[data-section-id="60ac2acc4bc21d6a986068b1"]{
min-height: clamp(0px, 56.25vw, 100vh) !important;
}

or

section[data-section-id="60ac2acc4bc21d6a986068b1"] {
.page-section {
min-height: clamp(0px, 56.25vw, 100vh) !important;
}
}

Sorry nothing is changing when input

On 7/24/2021 at 2:15 AM, BennyCC said:

Sorry nothing is changing when input

Add to Design > Custom CSS > Then save & reload the site

/* mobile resize image */
@media screen and (max-width:767px) {
    [data-section-id="60ac2acc4bc21d6a986068b1"] {
        min-height: unset !important;
        height: 50vh;
    }
}

@tuanphan This worked. Thank you so much!

On 7/26/2021 at 11:50 PM, BennyCC said:

@tuanphan This worked. Thank you so much!

Need help on these?

(Checked July 28)

Site URL – https://www.okayokayla.com/

1. (Mobile – Homepage) Button is skewed to the right.

https://www.okayokayla.com/

2. (Mobile – Contact) Remove scroll bar?

https://www.okayokayla.com/contact

3. (Tablet – Services) Increase text width?

https://www.okayokayla.com/services