Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 8, 2018 at 2:28 pm #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

    October 9, 2018 at 1:06 am #156256
    Skandha
    Participant

    @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

    October 9, 2018 at 5:32 pm #156357
    hoiung
    Participant

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

    October 10, 2018 at 2:04 am #156392
    Skandha
    Participant

    @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

    October 10, 2018 at 8:16 am #156452
    hoiung
    Participant

    Hey,

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

    Thanks, Hoi

    October 11, 2018 at 1:59 am #156489
    Skandha
    Participant

    @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

    October 12, 2018 at 5:29 pm #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! 🙁

    October 12, 2018 at 5:29 pm #156646
    hoiung
    Participant

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

    October 12, 2018 at 6:44 pm #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?

    October 15, 2018 at 1:29 am #156771
    Skandha
    Participant

    @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

    October 15, 2018 at 7:48 am #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 🙂

    October 23, 2018 at 3:52 am #157357
    Skandha
    Participant

    @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
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Header Media not working on mobile’ is closed to new replies.