• Resolved whitelily85

    (@whitelily85)


    Hi everyone,

    I’m a bit stuck… My header slider is working fine on desktop, but it disappears on smaller/mobile screens but shows an empty space instead.

    When I inspect the empty element, it indicates a Jetpack lazy image loading class. However, I have disabled Jetpack’s lazy image function as per here: https://jetpack.com/support/lazy-images/

    I also de-activated the whole Jetpack plugin, cleared cache, and it still shows the class. No idea where else I should switch it off?

    I hope someone out there could help me… Many thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Ramona

    (@nextend_ramona)

    Hi @whitelily85

    Looks like you published your #2 Smart Slider 3 slider twice to the same page. One slider can only be published once in a page:
    https://smartslider.helpscoutdocs.com/article/1744-limitations#same-slider-used-twice-or-more-in-the-same-page

    If you really need to have the same looking slider twice, duplicate it and publicsh the duplicated slider into the second position.

    Thread Starter whitelily85

    (@whitelily85)

    Hi Ramona, many thanks for your time!

    It was certainly not my intention to add the same slider twice. (The idea is just to have 1 slider in the header of the page constantly.) I have tried to find where the duplicate is, but can′t find it. I have added the header slider as a widget through the Astra team header builder. I have removed it and added it back, but still get the same result where it′s working fine on desktop but disappears on smaller screens.

    If someone knows what I′m doing wrong and would be so kind to let me know, I would appreciate it a lot. I am eager to learn ??

    Ramona

    (@nextend_ramona)

    Hi,

    I’m not really familiar with Astra theme, but maybe it creates a different mobile header that way that it duplicates the desktop header’s content. That’s not a good practice, as the header can contain HTML IDs, which can’t be duplicated.

    You could test this if you can put a simple text into the header. Write something really unique what you surely won’t have anywhere inside your page. Then check the page source (right click >View page source, or just write view-source: in front of your site’s URL. E.g. view-source:https://example.com/ ) and search for this unique text. If you see two results, then the theme duplicates the header.

    Try looking for an option to create a separate mobile header, or ask in your theme’s support forum:
    https://www.ads-software.com/support/theme/astra/
    how to prevent the header from being duplicated.

    If there’s no way not to duplicate the header, the best I can suggest is to publish your slider elsewhere (outside the header). The problem shouldn’t exist from other place.
    Maybe use a widget in a different widget area, or try the PHP publishing:
    https://smartslider.helpscoutdocs.com/article/1720-publishing-on-wordpress#php

    Plugin Contributor Jen H. (a11n)

    (@jenhooks)

    Hi @nextend_ramona, thanks for chiming in here!

    @whitelily85 – it’s unlikely that this is being caused by Jetpack. Hopefully you had some luck with the recommendations Ramona made. I’m going to mark this thread as resolved now, but feel free to reach back out if this does turn up as definitely being Jetpack’s issue. You can mark the Status as “not resolved” in the right sidebar.

    Cheers!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Smart Slider not loading on mobile – Jetpack Lazy image issue?’ is closed to new replies.