Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 21, 2017 at 10:58 am #736747
    Persepolis

    Hey guys,

    Thanks for the great theme. I’ve searched the database and can’t find a full solution for this topic, different layersliders for desktop and mobile. To begin with, I created two sliders, putting the desktop version on top. From there I tried various snippets of CSS code I found on your site, and this is what I’ve got so far.

    Using this code I found posted by Ismael did nothing.

    @media only screen and (min-width: 768px) {
    div#layerslider_2 {
    display: none !important;
    }
    }

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

    div#layerslider_2 {
    display: block !important;
    }
    }

    Then I found the following code, and this keeps the desktop version from showing up on mobile, but of course does nothing for the other half of the equation.

    @media only screen and (max-width: 990px) {
    div#layer_slider_1 { display: none; }}

    So the problem is trying to get the mobile version to not show up on desktop. I’ve tried playing with the components of the above code that relate to this issue, but haven’t had any luck.

    Thanks in advance for your assistance.

    January 23, 2017 at 6:26 am #737101
    Rikard

    Hey Persepolis,

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

    Best regards,
    Rikard

    January 23, 2017 at 9:40 am #737159
    Persepolis

    Hi Rikard,

    Here’s the site in question. At this point, only the home page is set up with two layersliders, the top one being the desktop version.

    Thanks, P

    January 23, 2017 at 3:57 pm #737293
    Rikard

    Hi,

    Thanks for the link, please try this CSS instead:

    @media only screen and (min-width: 768px) {
div#layerslider_2 {
display: none !important;
}
div#layerslider_1 {
display: block !important;
}
}

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

div#layerslider_2 {
display: block !important;
}
}

    Best regards,
    Rikard

    January 24, 2017 at 12:09 am #737480
    Persepolis

    Hey Rikard,

    Thanks for the CSS, but when I plugged it in on the general styling page, both sliders show up on the desktop version as well as on the mobile version. I flushed the cache in both cases.

    Then as an additional test, I switched back to the CSS snippet I mentioned in my first contact, as seen below, and while the two sliders show up on desktop, only the mobile version is showing on mobile. Thought I would also mention that I have the mobile menu activated for both smartphones and tablets, and just to check, I plugged in 990px for the max and 991px for the min, using the code you supplied, and still had the same results as at 767px and 768px.

    @media only screen and (max-width: 990px) {
    div#layer_slider_1 { display: none; }}

    Do you have any further suggestions?

    Thanks, P

    January 24, 2017 at 7:50 am #737572
    Rikard

    Hi,

    Please send us a temporary admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    January 24, 2017 at 10:37 am #737652
    Persepolis

    Hi Rikard,

    Here are the login details.

    Thanks, P

    January 25, 2017 at 5:43 am #738108
    Rikard

    Hi,

    Thanks for that. I pasted the CSS I gave you last to Quick CSS and it’s working. Though you have a third slider on the page which makes it look like it doesn’t, could you try to remove the third one please?

    Best regards,
    Rikard

    January 25, 2017 at 7:03 am #738147
    Persepolis

    Hi Rikard,

    I was puzzled by your comment about the third slider, so I did a bit of digging. See if any of this makes sense to you.

    First, there have never been more than two sliders on the home page, at least from the standpoint of the advanced layout editor where I do all my website building. After getting your email, I went to the editor and there were still only two sliders, the desktop with the mobile below as could be seen on the home page.

    Going under the assumption you were seeing something I wasn’t seeing, I thought to use the browser to inspect the page. There I saw that there were actually three sliders listed, ids 1, 8 and 2. 1 and 8 seem to both refer to the desktop, which is on top, and 2 refers to the lower mobile one.

    As a test, I deleted both sliders, and then inspected the page again and there were no sliders listed. I then put two sliders back and upon inspection 1, 8 and 2 had all returned. Checking the other pages that only have one slider each, when you inspect the page there are two sliders, a 1 and then then another number associated with the slider as with the home page slider 8.

    Digging further, I see on the layerslider page that the slider desktop id is 8 and the mobile id is listed as 3, although I can’t see that the 3 is showing up when I use the browser to inspect the page.

    I don’t really have a clue as to what’s going on, but I thought this info might help you troubleshoot the situation.

    Thanks, P

    • This reply was modified 7 years, 10 months ago by Persepolis.
    January 26, 2017 at 12:05 am #738660
    Persepolis

    Hey Rikard,

    Although it would have been nice to have a mobile and desktop version of sliders, it’s just seems to be more trouble than it’s worth. For now, I think I’ll just stick with one universal header, so you can go ahead and close this thread. I’ve deleted the mobile slider and deleted the CSS code you put in, so let me know if there’s anything else I need to clean up.

    If you’re interested in trying to figure this problem out for future reference, you may want to check my troubleshooting notes from above that I sent last night as a response to your last contact. It doesn’t really make sense to me, but it might to you.

    Thanks, P

    January 26, 2017 at 5:26 am #738707
    Rikard

    Hi,

    Thanks for the feedback. When I inspected the code there was an element with this ID: #layer_slider_3. That means the code was working, it removed the slider with this ID: #layer_slider_2. Not sure where it was coming from if you haven’t added in the backend though.

    Best regards,
    Rikard

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