[arejones]

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

[kls444]

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.

[Skandha]

@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

[arejones]

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

Thanks

[Skandha]

@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

[arejones]

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.

[Skandha]

@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

[Skandha]

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

Kind Regards,
Skandha

[arejones]

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

Much appreciated.

[Skandha]

@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

[Author]

Posts