Homepage Image not optimized on Mobile

Site URL: https://www.omnivorousadam.com/

Site URL: https://www.omnivorousadam.com/

Hi there,

Password to website: WaffleMan123

Currently my Homepage Banners are not optimized (doesn't fit whole image) on Mobile for some reason. Can someone let me know how to fix this issue?

5 hours ago, Omnivorous_Adam said:

Site URL: https://www.omnivorousadam.com/

Site URL: https://www.omnivorousadam.com/

Hi there,

Password to website: WaffleMan123

Currently my Homepage Banners are not optimized (doesn't fit whole image) on Mobile for some reason. Can someone let me know how to fix this issue?

is it because the image ratio that make the image cropped on mobile, I can suggest use a different background image to replace it on mobile (using custom css)

On 2/20/2021 at 7:36 AM, Omnivorous_Adam said:

Site URL: https://www.omnivorousadam.com/

Site URL: https://www.omnivorousadam.com/

Hi there,

Password to website: WaffleMan123

Currently my Homepage Banners are not optimized (doesn't fit whole image) on Mobile for some reason. Can someone let me know how to fix this issue?

Add to Design > Custom CSS

/* resize home banner */
@media screen and (max-width:767px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
section#homepage-banner {
    min-height: unset !important;
}
}

@tuanphanThank you so much! It looks so much better, but there is still an issueu.
See new screenshot. A gray bar appears on mobile.

On 2/23/2021 at 1:57 AM, Omnivorous_Adam said:

@tuanphanThank you so much! It looks so much better, but there is still an issueu.
See new screenshot. A gray bar appears on mobile.

Try change this

section#homepage-banner {
    min-height: unset !important;
}

to this

section#homepage-banner {
    min-height: unset !important;
	height: 200px !important;
}

You can adjust number 200