Header on Mobile

Hi,

Thank you for the update.

It doesn’t look that blurry on my end. You can get around that by using a larger or sharper image, but I don’t think that’s necessary. The slight blurriness actually makes the content more readable.

Transparent headers are supposed to be disabled on mobile devices. I can’t find any reason why it’s still working in yours. Please use this css code to move the content below the header container.

@media only screen and (max-width:767px) {
    .responsive #top #main {
        padding-top: 120px !important;
        margin: 0;
    }
}

Best regards,
Ismael

Hi,

Thank you for the update.

It looks like that because the background size property is set to “cover” and therefore, the browser has to force the image to cover the entire container while preserving its aspect ratio. We can set the background size to 100% or contain, but it will distort the image or create space around it. You can see the behavior of background-size property in the following link https://tympanus.net/codrops/css_reference/background-size/.

The best solution is to disable the background on mobile view or apply another background or image that is specifically resize for smaller screens or taller container.

@media only screen and (max-width: 767px) {
    .footer_color {
        background: #ffffff url(BACKGROUND IMAGE URL HERE) top center  no-repeat fixed;
    }
}

Best regards,
Ismael