Homepage Default Header not fully visible

  • Hello,
    I’m traying to set the homepage header to be fully visible, not only an image part.
    What are the write settings?
    On the desktop PC you can see it whole picture, but on the mobile phone you only see part of the image.
    I tried several settings in Welcome – Background but without success. Still can’t see the full image on mobile phone.
    Please help.
    Thank you.
    Dan.

    Hello Dan,

    It will not be possible to see the whole image on mobile depending on how much content you have in your Welcome section.

    The image will adjust to be 100% of the height of the Welcome section which means if it is wide some parts will be cut off, otherwise the image would be distorted.

    You can always add custom CSS code to reduce the font-size of the text on mobile so the Welcome section is smaller, which will mean more of the image will appear.

    Can you provide me with a link to your site?

    This reply has been marked as private.

    Hello Dan,

    Yes I see what you mean.

    However, this is what happens when you use a background image with text inside the image.

    You can try by reducing the padding of the Welcome section with some CSS code,

    @media (max-width: 767px) {
    .hero {
    padding: 110px 0 70px;
    }
    }

    Place this in Appearance > Customize > Additional CSS field.

    You can adjust the padding size to a number you’re happy with.

    Hello Hans,
    I tried several dimensions but to see the full image on the mobile I failed.
    https://ibb.co/WyV4sx9
    reduced to a minimum:
    https://ibb.co/FKSPpK8
    Can you help me with this problem?
    Thank you for your time and support.
    Dan

    You can add this code to make the background image 100% of the width on mobile devices,

    @media (max-width: 767px) {
    .hero {
    background-size: 100% auto !important;
    }
    }

    Hello,
    Yes, it works!
    How do I set now, that the image does not appear several times on the mobile?
    https://ibb.co/Ks3vVdt
    Thank you for your patience.
    Dan

    Hello Dan,

    @media (max-width: 767px) {
    .hero {
    background-repeat: no-repeat !important;
    }
    }

    Hello Hans,

    If I type ‘background-repeat: no-repeat! Important’ instead of ‘background-size: 100% auto! Important’, it is no longer displayed in full screen.
    What to do?

    Thank you for your time and I think you can make it work.

    Dan

    Hello Dan,

    This is the challenge you face when using a background image with text on mobile devices.

    Trying to make it fit for all devices is almost impossible.

    The only option I see you have is to make it 100% height on mobile devices and try to reduce the top and bottom padding so that it fits as much as possible into the section.

Tagged: 

You must be logged in to reply to this topic.