Mobile Header Image Issues

[Mitchell]

Hi, I’m building a website for my theatre company, and am having some issues with the mobile interface with regards to the header image.

Firstly, my site is here: http://web.curiouslegends.com.au/curiouslegends/

When using on a desktop browser, the video in the header image (being used for the whole page) works fine. When used in a mobile browser (have tried both Firefox and Chrome), it defaults to the uploaded header image instead of the video, or no image at all (if I remove the header image).

The issue is with the dimensions. I don’t seem to be able to change the default height of the header image that’s displayed, which mucks up my site. I.e. – browsing the other pages work as intended on a mobile (i.e., header images with 660px height). Browsing the home page on a mobile defaults to no video, a small image, and lots of space until the page content.

Are you able to tell me how I either:

• Include the header video on mobile interfaces by default (I’m open to why this may be a bad idea)
• Change the default header image size, so that I can display the replacement header image in-line with other headers on the site

Thanks in advance for your time

[scrambler]

I get the feeling the Mobile browser may not support the video background. @weaver may be able to confirm.

But if that the case, I have no idea what takes care of subsituting the video for the image, and given on desktop, even with a small mobile browser size, the video does show up, I have no way to inspect the page with the fixed header image.

Again, May be @weaver will have more insights, and I will try to make more tests.

It would help if you would explain how you have setup header image and the video header right now for that page.

[Mitchell]

Thanks for that. I setup the video in the Customisation setting screen, and the header image in the same place.

Issue seems to be some default setting in the code re screen size. It’s actually the same browser. I.e., I can use Firefox and Chrome on android with Samsung Dex on a big screen (i.e., 30 inch monitor), and the video works fine. Shrinking the window to mobile size also plays the video, however when I refresh the window at small size, it switches to the header image and mobile interface.

Any other ideas? Thanks.

[scrambler]

Good catch about the refresh, then I could test on a desktop.

Still don’t know why the Video header does not load on Mobile, that may be a WP limitation, @weaver will need to confirm.

In the mean time here is to make it look like the other pages:

– First, the menu ends up under the image.
To fix that, you have a CSS+ rule for the prewrapper area
{position:fixed;width:100%;z-index: 1;}

change the z-index to 1000
{position:fixed;width:100%;z-index: 1000;}

– Next, when the substitution happens, the default header image is applied as an image instead of as a background image.
That may be due to the settings you have for the header image globally.

What do you have in the Global settings found in Customize > Images > Header Image Layout > Header Image rendering?
If all pages use the same layout, this should be set to As responsive BG Image

If it is set like that, I am not sure why the header image ends up being inserted as an image instead of a background image when the video is removed. That may be a bug, when @weaver clarifies if it is normal the Video header does not load on mobile, we can double check that.

In the mean time, below is the Custom CSS that will hide the small header image on mobile and replace it by a background image like on other pages
Add these rules to the Theme Global Custom CSS Rule box

home.is-mobile #header {background-image:url(http://web.curiouslegends.com.au/curiouslegends/wp-content/uploads/2021/08/cropped-IMG_1225-cropped-1.jpg);}
home.is-mobile #header #wp-custom-header {display:none;}

[Mitchell]

Hi, thanks so much for that. The menu is working great now with your edited code, however the custom CSS isn’t working. I’ve tried both the code above, and a URL with another image from our website, and neither change the default image shown there when a video isn’t shown. I have pasted your code in Customise>Custom CSS>Global Custom CSS.

Under Customize > Images > Header Image Layout > Header Image, the rendering is set to ‘As responsive BG image’.

I’d much prefer to have the video in the mobile version. Is this a bug?

Thanks,

Mitchell

 

 

[scrambler]

This reply has been accepted as the best answer.

Sorry the dot in front of home disappeared, my bad… 🙂

.home.is-mobile #header {background-image:url(http://web.curiouslegends.com.au/curiouslegends/wp-content/uploads/2021/08/cropped-IMG_1225-cropped-1.jpg);}
.home.is-mobile #header #wp-custom-header {display:none;}

As for the Video, I read somewhere online that
“It is the default feature of WordPress that Header Videos are only loaded on the front page for view ports that are at least 900 pixels wide and 500 pixels tall.”

@weaver would have to confirm.
If that is the case, there may be some video header plugins that can go around that limitation.

[Mitchell]

Fantastic! Thanks so much – working fine now. Really loving using Weaver Xtreme to build our new site. Been an advocate for a number of years, and will keep telling people about it. Currently, this is the default theme I use whenever we need to build new websites.

Yep, that makes sense for the video. At this stage, I’m happy with the image as is, rather than forcing a video to mobile size (though this would look cool). I do notice that in mobile view, the page title is now very close to the image – ideally this would have some more padding, however can live with it if needed. Are there any quick, customisation fixes for this? (thinking there may be a setting I missed).

@weaver – are you able to tell me if the header issue above (i.e., instead of video – defaulting to image that doesn’t have the background image behaviour) is a bug, or something built in? Happy with this fix, however am wanting to avoid any potential future breakage due to updates. Will mark this as solved.

Thanks!

[scrambler]

” I do notice that in mobile view, the page title is now very close to the image – ideally this would have some more padding”

Are you speaking of the Curious Legend Image?

If so, I really don’t see it close to the header image, but this is inserted with an image block that has a default top margin.

If there are any settings in the block to add padding or margin to the image you could do that.

Or else you could use the CSS rule below

.home .entry-content {padding-top:2em;}

With the value you like (default is at 1em)

 

[Author]

Posts