Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #284461

    Hello
    I use the Fullscreen Slider to only display a YouTube video, nothing else, no other images slides and because I do no want to show a fallback image on mobile devices, I chose to show a simple Youtube video instead.

    To do that I use two simple CSS class:

    .hidden-desktop {display:none !important;}
    .visible-desktop {display:block !important;}

    In my page I have two elements:
    1 – The Fullscreen Slider (the video) with this class: visible-desktop
    2 – A simple YouTube Enfold element with this class hidden-desktop

    Now my Media Queries:

    /* Mobile Styles */
    @media only screen and (max-width: 767px) {
      /* Add your Mobile Styles here */
    	.hidden-desktop {display:block !important;}
    	.visible-desktop {display:none !important;}
    }
    

    This one is perfect and works both on an iPhone and Desktop (if you reduce the with of the page) but I can’t make it work with my iPad 2, i always show the fallback image of the Fullscreen Slider?
    I have tried a ton of media queries without any chance…

    Thanks

    #284545

    Hey pako69!

    Thank you for the info.

    Please use this instead:

    @media only screen and (max-width: 767px) {
      /* Add your Mobile Styles here */
    	.hidden-desktop {display:block !important;}
    	.visible-desktop {display:none !important;}
    }
    
    @media only screen and (min-width: 768px) and (max-width: 989px) {
      /* Add your Mobile Styles here */
    	.hidden-desktop {display:block !important;}
    	.visible-desktop {display:none !important;}
    }

    Or to simplify it, use this:

    @media only screen and (max-width: 989px) {
      /* Add your Mobile Styles here */
    	.hidden-desktop {display:block !important;}
    	.visible-desktop {display:none !important;}
    }

    Best regards,
    Ismael

    #284584

    Hello Ismael
    It do not work.
    I allready try this because I know how to target it but it has no effect.
    I think Kriesi has hardcoded something special, like a sort of device detection, so css rules have not effect

    #284905

    Hi!

    The css will work based on what rules you give it and if an element is showing on your tablet then the tablet isn’t falling under those css rules.

    For me at least its being hidden below 767px as its designed and written. If you want to give it more flexibility than increase the base mobile only media query as Ismael showed above. On your live site it remains unchanged.

    Cheers!
    Devin

    #285804

    Hello Devin
    Yes it is on my live site:

    @media only screen and (max-width: 989px) {
      /* Add your Mobile Styles here */
    	.hidden-desktop {display:block !important;}
    	.visible-desktop {display:none !important;}
    }
    

    And I always see the fallback image on a iPad 2.
    It works with a browser if you resize it (I see the simple YouTube Enfold element)
    It works on my iPhone 5 (I also see the simple YouTube Enfold element)

    Can’t fire an iPad …

    Thanks

    #286515

    Hi!

    The iPad device has a screen resolution of 1024x768px. Please try this:

    @media only screen and (max-width: 1025px) {
      /* Add your Mobile Styles here */
    	.hidden-desktop {display:block !important;}
    	.visible-desktop {display:none !important;}
    }

    Cheers!
    Ismael

    #286531

    Thank you Ismael.
    To be closed :)

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘How to hide Fullscreen Slider on mobile devices?’ is closed to new replies.