Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #156203
    hoiung
    Participant

    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

    #156256
    Skandha
    Keymaster

    @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

    #156357
    hoiung
    Participant

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

    #156392
    Skandha
    Keymaster

    @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

    #156452
    hoiung
    Participant

    Hey,

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

    Thanks, Hoi

    #156489
    Skandha
    Keymaster

    @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

    #156645
    hoiung
    Participant

    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! 🙁

    #156646
    hoiung
    Participant

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

    #156648
    hoiung
    Participant

    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?

    #156771
    Skandha
    Keymaster

    @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

    #156798
    hoiung
    Participant

    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 🙂

    #157357
    Skandha
    Keymaster

    @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

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Header Media not working on mobile’ is closed to new replies.