[Resolved] Page header image

[Feijoo]

Hello,

I have a problem with the page header image, on the computer screen it looks good, but on mobile, the image appears cropped…I can’t fix it.

Thanks a lot.

[David]

Hi there,

OK, so the background image is set to cover and therefore gets cropped on smaller screens.
Need to make a few changes.

1. In your page header content remove all the line breaks </br> from your markup and add a class to the footer element like so:

<footer class="page-header-footer">

2. Then add the following CSS:

.generate-content-header {
    background-size: 100%;
}

.inside-page-header {
    padding: 28% 40px !important;
    position: relative;
}
.page-header-footer {
    position: absolute;
    bottom: 0;
    right: 5%;
}

[Feijoo]

Hi,

Problem solved 🙂

Thank you very much!!

Regards.

[David]

Awesome. Glad i could help.

[Author]

Posts