[geraldmclean]

I am hoping you can assist me.
How can I justify the header video to centre?
I had loaded a video for header media and it was showing the centre of the video on mobile phones, which was just about okay. However, it has now taken to showing the far left of the video, which misses the building altogether and makes a nonsense of my opening video. Is there a fix to get the central section to show once more?

see geraldmclean.com

[Skandha]

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

@media screen and (max-width: 768px) {
	.custom-header .wrapper::before {
		display: none;
	}
	.has-header-image.home .custom-header-media,
	.has-header-video.home .custom-header-media,
	.has-header-text.home .custom-header-media {
		display: inherit;
		height: auto;
		width: auto;
	}
	#wp-custom-header {
		position: relative;
	}
	.has-header-video .custom-header-media .wp-custom-header video,
	.has-header-video .custom-header-media .wp-custom-header iframe {
		position: relative;
	}
}

Let me know if this solves the issue.
Kind Regards,
Skandha

[geraldmclean]

Hi Skandha,
Thanks for your help.
The CSS code you sent me (Thanks again) shows the full width of the video when viewed vertically on a mobile phone it is a bit small and doesn’t fill the screen, so it’s not so impactive/impressive.

So the CSS code doesn’t actually produce the result I was after. As most of the action is in the centre of videos I wanted it to show/focus on the central are when viewed vertically on mobile phones but fill the screen.

It was showing the centre of the video on mobile phones, which was okay, but now has taken to showing the far left of the video.
Is there a way to force the header to display the central section of a header video when viewed vertically on a mobile phone?
With thanks and regards
Gerald

[Johnnie Johnson]

.custom-header .wrapper:before {
background-position: center top;
}

[Author]

Posts