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

Home Forums Support Page hero custom image changes position on mobile when "merge with content"

  • This topic has 7 replies, 3 voices, and was last updated 12 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1014770
    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

    #1014816
    David
    Staff
    Customer Support

    Hi there,

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

    #1014883
    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

    #1014904
    Leo
    Staff
    Customer Support

    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 🙂

    #1015042
    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/

    #1015130
    David
    Staff
    Customer Support

    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;
        }
    }
    #1015423
    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 🙂

    #1015512
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.