Swift Slider on Mobile overlapping

[wmstudio]

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.

[laranz – SUPPORT]

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.

[wmstudio]

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.

[Kyle – SUPPORT]

Try adding this to your custom css:

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

– Kyle

[wmstudio]

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.

[Kyle – SUPPORT]

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

[wmstudio]

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?

[Kyle – SUPPORT]

Have you tried:

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

– Kyle

[wmstudio]

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.

[Kyle – SUPPORT]

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.

[wmstudio]

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)?

[Kyle – SUPPORT]

Ok great, add this to your custom css:

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

– Kyle

[wmstudio]

Kyle that is magic. Thank you!!!

[Kyle – SUPPORT]

No problem

– Kyle