Mobile Image Crop on Intro Banner

Site URL: https://www.pflaghalton.ca

I've tried editing @tuanphan code from previous threads but cannot for the life of me get my banner to scale properly on mobile.

Any ideas?

You mean Halton image?

3 minutes ago, tuanphan said:

You mean Halton image?

Yes, that one. I have been playing with it and I think it might be closer to fixed. Let me know if you can help out.

On 9/16/2022 at 9:12 AM, middleg said:

Yes, that one. I have been playing with it and I think it might be closer to fixed. Let me know if you can help out.

I see you solved with this code?

@media screen and (max-width: 640px) {
    .homepage .section-background img {
        width:100% !important;
        height: auto !important
    }
}
@media screen and (max-width: 640px) {
    .homepage #page section:first-child {
        min-height:20vh !important;
        height: 23vh;
        margin-top: 9vh
    }
}

You can also remove both & use this

@media screen and (max-width: 767px) {
    .homepage #page section:first-child {
        min-height:unset !important;
        height: 30vh;
    }
}

On 9/19/2022 at 5:28 AM, tuanphan said:

I see you solved with this code?

@media screen and (max-width: 640px) {
    .homepage .section-background img {
        width:100% !important;
        height: auto !important
    }
}
@media screen and (max-width: 640px) {
    .homepage #page section:first-child {
        min-height:20vh !important;
        height: 23vh;
        margin-top: 9vh
    }
}

You can also remove both & use this

@media screen and (max-width: 767px) {
    .homepage #page section:first-child {
        min-height:unset !important;
        height: 30vh;
    }
}

 

thanks so much. I'm just working on pushing the banner below the header, but this helps clean everything up. Appreciate your help.