New Landing How can we help? Themeforest Theme Support Joyn Swift Slider on Mobile overlapping

Viewing 14 posts - 1 through 14 (of 14 total)
  • Posted in: Joyn
  • #114862
    wmstudio
    Member
    Post count: 39

    Hi Support,

    As you can see the Swift Slider does not scale down on mobile.

    Is it possible to have a custom CSS in the “Extra class name” that can detect mobile browser and simply switch off the background and just leave the copy?

    We await your superior knowledge.

    Thank you, in advance guys!

    Attachments:
    You must be logged in to view attached files.
    #115047
    laranz – SUPPORT
    Member
    Post count: 3186

    Hi,

    I didn’t see the screenshot slider in the home page is that in another page? and what do you mean by overlapping the text over the images you mean?? You mean you want to remove the images on the mobile view in the slider..??

    Make sure you are on the latest theme version, if not backup the current theme folder via FTP, and update the theme, and see this solves the issue

    Let us know,

    Thanks,
    laranz.

    #115256
    wmstudio
    Member
    Post count: 39

    We have the latest version of the theme.

    Please see the attached mobile screenshot.

    Yes I do mean I want to “remove the images on the mobile view in the slider?”

    Q) Is it possible via custom CSS to remove the background image on the slider when in a mobile browser?

    Attachments:
    You must be logged in to view attached files.
    #115489
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Try adding this to your custom css:

    @media only screen and (max-width: 767px) { 
    .swiper-slide {
      background: none;
    }
    }

    – Kyle

    #116390
    wmstudio
    Member
    Post count: 39

    Hi Kyle,

    I added this CSS.

    When I view the site via an iPhone, the background of the slider still appears.

    Interestingly if I shrink my desktop web browser the background disappears.

    I need that to happen if the browser is a mobile period.

    Sorry to be such a pest.

    We cannot bill the Client until we resolve this issue.

    Thank you, in advance, Kyle.

    #116392
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    If the background disappears when you reduce the size of your browser then it should disappear on iPhone too. It’s likely a cache issue, please clear your cache

    – kyle

    #116414
    wmstudio
    Member
    Post count: 39

    So we deleted our cache on the iPhone and my Android phone. Restarted both phones.

    The background to the slider is still there.

    CSS does not seem to work.

    Q) Kyle, is there a Custom JS solution?

    #116420
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Have you tried:

    @media only screen and (max-width: 767px) { 
    .swiper-slide {
      background: none!important;
    }
    }

    – Kyle

    #116448
    wmstudio
    Member
    Post count: 39

    I have tried that CSS. It has worked. However it has made the swift slider at the top of the page lose it’s background too.

    I’ve attached a PDF that explains all the issues we are having with the Swift Slider.

    On the Desktop version:
    Q) How do we prevent overlapping navigational arrows on text?
    Q) Can arrows stay always on without mouse over to show them?
    Q) The squares representing each slide is invisible on a white background image.
    How do we make it so we can see there squares on a white background say as a #efefef?

    On the Mobile Version:
    Q) As illustrated in the PDF is it possible in any way to make the background wrap underneath the copy?

    Thank you, in advance Kyle.

    Attachments:
    You must be logged in to view attached files.
    #116961
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    1 & 2) I’m afraid the arrows have to overlap the slide, however this is why we display them only on hover. So it wouldn’t make sense for you to display them all the time if you’re not happy with them overlapping your content

    3) You need to set the style of the slides to dark (see screenshot)

    4) I’m afraid this is not possible with a slider

    – Kyle

    Attachments:
    You must be logged in to view attached files.
    #116969
    wmstudio
    Member
    Post count: 39

    Hi Kyle,

    I’ve have worked on a workaround solution – without altering code! I have made the swift slider, mobile compliant. The image falls below the copy on a mobile device!

    Q) Is it possible to always keep the navigational arrows on
    (Is that a CSS OnMouseOut property to keep the arrows on all the time)?

    #116975
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Ok great, add this to your custom css:

    a.swift-slider-prev, a.swift-slider-next {
      opacity: 1;
    }

    – Kyle

    #117006
    wmstudio
    Member
    Post count: 39

    Kyle that is magic. Thank you!!!

    #117007
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    No problem

    – Kyle

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register