- This topic has 9 replies, 3 voices, and was last updated 3 years, 3 months ago by
Skandha.
-
AuthorPosts
-
May 16, 2021 at 2:01 pm #282066
arejones
ParticipantMy 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
May 16, 2021 at 2:20 pm #282067kls444
ParticipantYou 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.
May 17, 2021 at 3:17 am #282100Skandha
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,
SkandhaMay 17, 2021 at 1:27 pm #282155arejones
Participant@Skandha
I have now uploaded a 1920*1080 sized header image as recommended.Thanks
May 18, 2021 at 8:31 am #282248Skandha
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,
SkandhaMay 19, 2021 at 3:26 am #282282arejones
ParticipantIt 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.pngMany thanks for your help.
May 19, 2021 at 8:07 am #282358Skandha
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,
SkandhaMay 20, 2021 at 8:43 am #282472Skandha
Participant@arejones: Hello there,
I have fixed the header media issue on your site. Can you please if the issue is resolved?Kind Regards,
SkandhaMay 20, 2021 at 12:40 pm #282477arejones
ParticipantYes you have. Thank you very much for your help!!
Much appreciated.
May 20, 2021 at 11:47 pm #282539Skandha
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 -
AuthorPosts
- The topic ‘Responsive Header Image – BusinessFocus’ is closed to new replies.