[hoiung]

Hi,

The header video works on desktop, but when i test it on my phone, it just doesn’t load! Contents if is scroll down is fine.

How can I fix this? my website is https://spring.chillzouk.com/

Thanks, Hoi

[Skandha]

@hoiung: The video header is not displayed on small mobile devices because speed and bandwidth are usually considerations on phones. This is the default feature of WordPress.

Kind Regards,
Skandha

[hoiung]

Are there any ways to change the video header to show the header image instead of video for mobiles?

[Skandha]

@hoiung: Yes, you can display a header image in mobile view. Let me know which image you want to be displayed in mobile view and I will provide you necessary CSS Code.

Kind Regards,
Skandha

[hoiung]

Hey,

Could I display this image: https://spring.chillzouk.com/wp-content/uploads/2018/06/repeat.jpg

Thanks, Hoi

[Skandha]

@hoiung: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width:900px) {
	.custom-header {
	 	background-image:url("https://spring.chillzouk.com/wp-content/uploads/2018/06/repeat.jpg") !important;
	}
}

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

[hoiung]

how can I make this image to be responsive to the width? I tried modifying your code to:

/* replaces video for mobile */

@media screen and (max-width:900px) {
.custom-header {

background-image:url(“https://spring.chillzouk.com/wp-content/uploads/2018/10/0_spring_logo.png”) !important;
width: 100% !important;
height: auto !important;

}
}

doesn’t work! 🙁

[hoiung]

PS. I really think you should build this into as a feature….

[hoiung]

Quick question, your template seem to have a beautiful slider background image feature already if video isn’t used. Why can’t it use the slider for mobile size and video for tablets/desktops?

[Skandha]

@hoiung: Thank you for the suggestion. I will forward this to our development team. Yes, you can activate slider for mobiles and header video for desktops. Activate featured slider on your site and I will provide you the CSS Code to make this possible.

Kind Regards,
Skandha

[hoiung]

skandha: for clarity, I’m referring to the Media Heading “randomise uploaded heads” and not the theme options “Featured Sliders”! Though having the option for both would be super useful 🙂

[Skandha]

@hoiung: I am afraid currently the option to enable randomise uploaded headers on mobile and header video on desktop in not available.
What you can do is enable Header Video in desktop view and then have a image for mobile or tablets views.

Let me know if this helps you out!
Kind Regards,
Skandha

[Author]

Posts