.slides li margin isn't responsive?

Hi there,

Do you have a link to your site?

Is the issue with Meta Slider or one of the lightboxes?

Thanks,
Dave

It’s with the actual meta slider. Here is the page link – https://persp.thecomputerdr.ca/destinations/kingston

Hi there,

In ‘Carousel’ mode, the individual images/slides are not designed to scale with the browser width, but instead more ‘pages’/dots are created so the user can scroll through to see the hidden images.

https://flexslider.woothemes.com/basic-carousel.html

Thanks,
Dave

I understand that, but can you tell me how/where to remove the ” !important ” on that margin-right that’s set in the widget admin ?

Thank you

Hi there,

Although there is the following CSS:

#metaslider_717.flexslider .slides li {margin-right: 28px !important;}

This isn’t responsible for the large gaps between the images after the 50% width is applied.

The width of the li’s remain the same, 300px, as they are by default – this is calculate by JavaScript which then adds the CSS.

An alternative method would be to create 2 slideshows (one for mobile, one for desktop) then use this plugin to display the relevant slideshow on each device:

https://www.ads-software.com/plugins/wp-mobile-detect/

Then setup your shortcode like this:

[device][metaslider id=123][/device] <– phones
[notdevice][metaslider id=456][/notdevice] <– not phones

Thanks,
Dave

Thanks for the work around, but do you know where I can remove that !important only?

Hi there,

Try removing the declaration in line 110 in ml-slider/inc/slider/metaslider.flex.class.php

Thanks,
Dave

Thank you so much for the reply.