Problems with the header image in Alizee

Hello,
I’m trying to change the header image with Alizee and adding custom css so that it looks whole, but I get different depending on the browser and the operating system, sometimes whole and sometimes cut. Is there any way to fix it?
My web url is:http://enconstruccio.org
The custom css I have (I found them in the forum) are:

header.has-banner div.site-branding {
padding:20% 0 10vw !important;
}

header.site-header::after {
background-size: contain;
}

@media (max-width: 991px) {
#masthead > .container {
padding-top:170px
}

header.site-header::after {
    background-position-y: 37px;
}

}
.main-navigation {
background: rgba(40, 40, 40, 0) !important; opacity: 1 !important; padding-top: 2 !important; text-align: right; font-weight: bold;
}
.site-header:after {
opacity: 1;
}

Hi,

I’ve just checked your site and I can see the header image display the same size in desktop/mobile screen. Did you already resolve the issue?

Yes,at the end I fixed it. I only put this code for the header.

header.has-banner div.site-branding {
    padding: 16vw 0 12vw;
}

header.site-header::after {
    background-size: contain;
}

@media (max-width: 991px) {
    #masthead > .container {
        padding-top: 57px
    }

    header.site-header::after {
        background-position-y: 57px;
    }
}

Also, I saw that I had a plugin that limited the width of images to 1200 (Resize Image Upload), so I could not put the banner to 1950. With the code and setting the image width to 0, it was fixed.
Thankyou

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.