Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 12, 2016 at 5:12 pm #711458
    imriky

    I can’t seem to find a solution for this problem, which I thought was a easy one.

    (I’d like to have an Advanced Layer Slider on the desktop version, and another one on mobile. So I created two of them. I’ve put the desktop slider inside of a color section (via text block) because I wanted to have the parallax background. I thought to use the same method for the mobile slider, even though the parallax effect doesn’t show on mobile. I tried to do so, and hide/show the desktop/mobile slider when on mobile and viceversa. And it worked fine, except that on mobile the slider shows a border that boxes it and a background with alternate lines.) So I figured to try and put the Layer Slider outside of the color section as a media element (without the text block workaround, to be clear). The borders and background aren’t there anymore, but now I can’t find a way to hide the Layer Slider on the desktop version of the website.)

    So I would need a solution for one of the two problems. Whichever is the easiest.

    Thank you very much

    November 13, 2016 at 9:08 am #711563
    Rikard

    Hi imriky,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    November 13, 2016 at 2:10 pm #711612
    imriky

    Sure,

    Thank you

    November 14, 2016 at 6:56 am #711796
    Rikard

    Hi,

    Thanks for the link though I could only see one slider on the page? If that is the one you would like to hide on mobile you can try adding this to Quick CSS:

    @media only screen and (max-width: 767px) {
#homeslider {
  display:none !important;
}
}

    Best regards,
    Rikard

    November 16, 2016 at 7:30 pm #713153
    imriky

    Hi Rikard,
    Thanks for your reply.

    If you visited the desktop version of the website you saw a layer slider, and if you visited the website from a mobile you saw a different layer slider (that has a striped background and a border around it, which I don’t like – and that is my problem).

    That’s because I pasted this code to the CSS:

    @media only screen and (max-width: 767px) {
#homeslider {
display:none !important;
}
}

#homeslidermobile { display: none; }
@media only screen and (max-width: 767px) {
#homeslidermobile { display: block !important; }
}

    I noticed that if I place the (mobile-designed) Layerslider instead of the text box containing it, the problem of the background and border disappears, so either I find a way to hide the Mobile LS when visiting from a desktop (because in the desktop version I still want the parallax effect, available only if I put the LS inside of a text box) or the other solution would be to find a way to hide the background and border on the text box containing the Mobile LS (when visiting from mobile).

    I’m trying to explain myself as good as I can, but I realize that the matter seems complicated. Maybe if you could visit the website from a desktop and a mobile you’ll be able to understand better what I’m talking about.

    Thank you very much

    November 17, 2016 at 7:13 am #713389
    Rikard

    Hi,

    It’s only mildly confusing, like most other threads I read on a daily basis :D

    I think I know what you mean now though, please try this CSS:

    #homeslidermobile pre {
  background-image:none !important;
}

    Best regards,
    Rikard

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