Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 8, 2020 at 12:15 am #1201723
    GeoffreyTMoore

    I have a question for you. I would like to create different layer sliders that show on my website for mobile vs desktop/tablet. I saw this was possible under the Mobile tab of my slider setting per this screen shot – viewable here: https://prnt.sc/rv0xbw

    I also see there is some discussion about this per the link below:
    https://kriesi.at/support/topic/showing-different-layer-slider-on-desktop-and-mobile/

    Here’s the customization that Iʻm not sure how to manage: I like my current layer slider format for desktop and tablet viewing, but would like to create custom vertical sliders that will display better, and only appear on mobile phones. The setting you can click only “hide on mobile” includes tablets, which is not ideal. I would like to hide on phones, but not tablets. My questions below…

    1. Can you guide me on how to set this up? It seems I can control this based on the values below the mobile only button that shows “hide Under/Over” certain “viewpoint values”… What are these viewpoint values – are they pixel dimensions?

    2. When I create layer sliders for mobile phones only, will I be able to hide these on desktop using these same values? Or what should I do so that the user only sees one version of the slider, never both?

    The desired effect will be when you are on a phone, you will see only a custom vertical slider set one the home page, and on desktop/tablet, you will see only the current ones I have designed in panoramic format.

    I hope this makes sense. I appreciate your guidance.

    April 14, 2020 at 5:32 am #1203445
    Rikard

    Hey GeoffreyTMoore,

    I’m very sorry for the late reply. We can help you out with custom CSS if you like, if you need help with that then please post a link to where we can see both sliders. Also please let us know which one is for mobile and which one is for tablet and desktop.

    Best regards,
    Rikard

    May 20, 2020 at 10:02 pm #1214794
    GeoffreyTMoore
    This reply has been marked as private.
    May 22, 2020 at 12:53 pm #1215211
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (min-width: 768px) {
.home #layer_slider_1 {
  display: none;
}
}

@media only screen and (max-width: 767px) {
.home #layer_slider_2 {
  display: none;
}
}

    Best regards,
    Rikard

    May 22, 2020 at 10:42 pm #1215332
    GeoffreyTMoore
    This reply has been marked as private.
    May 24, 2020 at 8:44 am #1215665
    Rikard

    Hi,

    You had an open media query in Quick CSS, I closed it for you and the CSS is now applying.

    Best regards,
    Rikard

    May 25, 2020 at 11:38 pm #1216319
    GeoffreyTMoore

    Thanks for your help! Looks good to me, I’ll double-check on some other devices to ensure we’re all set.

    Thanks!

    May 26, 2020 at 1:27 pm #1216488
    Rikard

    Hi,

    Thanks for the update, we’ll keep this thread open in case you should need any further help from us.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.