[Resolved] Page hero custom image changes position on mobile when "merge with content"

[Alec]

Hello, I could not find the solution to fix this: when I chose to merge with content the site header I created with a custom image in header for my home page, the image position does not display properly on mobile. It is not centered.

I tried to make variations on padding and image position in the element settings but with merge selected it does not “respond”.

I hope you can help me. Thanks in advance

[David]

Hi there,

in the Header Element below where you select the background image you can select the position, set this to center center

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alec]

I tried all the options, it does not make the bkgr image centered until I choose to unmerge with the content.
The image is 1920 by 843 pixels.
When the header in element the nav menu is not merged with content, the image is resisting to fit the mobile size screen. But it does not happen when the header is merged…

Maybe I should try to choose a different image

[Leo]

Hi there,

Have you figured this out? The topic is marked as resolved.

Background images aren’t responsive by nature (it’s not a theme thing).

Another solution would be use an image specifically for mobile with this CSS:

@media (max-width: 768px) {
    .home .page-hero {
        background-image: url(https://IMAGE-URL);
    }
}

Let us know if this helps or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alec]

Thanks for the reply but the CSS doesn’t help.
The image stays uncentered on mobile. Even if I change to header merged only on desktop it is still not centered.
I see this example as a successful implementation of a merged: https://www.lynnharrell.com/

[David]

So set you Header Element to display the image correctly on Desktop.
Then add this CSS to reposition it for the smaller screens:

@media (max-width: 768px) {
    .page-hero {
        background-position: 20% center;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alec]

Thank you David! This works just fine. Although applying the CSS doesn’t reduce the image proportionally but it centers it on the smaller screen.

Thank you for your help guys! Have a good weekend 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts