Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 27, 2014 at 11:19 am #284461
    pako69

    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

    June 27, 2014 at 1:47 pm #284545
    Ismael

    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

    June 27, 2014 at 2:59 pm #284584
    pako69

    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

    June 29, 2014 at 12:49 am #284905
    Devin

    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

    July 1, 2014 at 5:21 pm #285804
    pako69

    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

    July 3, 2014 at 7:05 am #286515
    Ismael

    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

    July 3, 2014 at 8:05 am #286531
    pako69

    Thank you Ismael.
    To be closed :)

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