Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #282066
    arejones
    Participant

    My website is using the BusinessFocus theme.

    The header image fits perfectly for desktops, but for phones in particular (and tablets), it crops the image width, so you can barely see any of the image.
    How do I fix it so the full width of the image is visible on different devices?

    The website is advancedvetsacademy.com

    Many thanks

    #282067
    kls444
    Participant

    You could probably override this by using custom CSS, but are you sure that’s what you want?
    If the image is a photo it will not look right if the aspect ratio is changed.
    If the aspect ratio of the header is maintained, it will be very short vertically, on small screens.

    Better might be to create a head for each screen width range (phone, tablet, laptop/desktop) and use media queries in custom css to use the appropriate header but that’s a lot of work.

    #282100
    Skandha
    Participant

    @arejones: Hello there,
    Can you please try using the recommended Header Image size of 1920*1080 and let me know so that I can provide you the necessary CSS Code?

    Kind Regards,
    Skandha

    #282155
    arejones
    Participant

    @Skandha
    I have now uploaded a 1920*1080 sized header image as recommended.

    Thanks

    #282248
    Skandha
    Participant

    @arejones: Hello there,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    .custom-header .wrapper::before {
        background-image: unset;
    }
    .custom-header-content {
        display: none;
    }
    .has-header-media .custom-header-media .wp-custom-header img {
        display: block;
    }
    @media screen and (max-width: 1024px) {
    	.custom-header-media {
    		height: auto !important;
    	}
    }
    @media screen and (min-width: 1024px) {
    	.custom-header-media {
    		height: 100vh;
    	}
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

    #282282
    arejones
    Participant

    It looks like it is trying to work on my phone but isn’t quite right and as soon as you scroll it disappears. Pictures before and after scrolling in links.

    Before scrolling:
    https://advancedvetsacademy.com/wp-content/uploads/2021/05/IMG_9230.png
    After scrolling:
    https://advancedvetsacademy.com/wp-content/uploads/2021/05/IMG_9231.png

    Many thanks for your help.

    #282358
    Skandha
    Participant

    @arejones: Hello there,
    I will need to look into your site to debug the issue. I have sent you an email. Please check your inbox as well as the spam folder.

    Kind Regards,
    Skandha

    #282472
    Skandha
    Participant

    @arejones: Hello there,
    I have fixed the header media issue on your site. Can you please if the issue is resolved?

    Kind Regards,
    Skandha

    #282477
    arejones
    Participant

    Yes you have. Thank you very much for your help!!

    Much appreciated.

    #282539
    Skandha
    Participant

    @arejones: Hello there, I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
    https://wordpress.org/support/theme/businessfocus/reviews/#new-post
    Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely
    appreciated. Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know. Have a great weekend! 🙂

    Kind Regards,
    Skandha

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Responsive Header Image – BusinessFocus’ is closed to new replies.