Support » Plugin: MetaSlider Lightbox » .slides li margin isn't responsive?

  • Resolved rrmia

    (@rrmia)


    .slides li margin-right is set with !important, so I’m not able to change this in @media when I want the carousal to continue showing 3 images in small screens just like on desktop.

    On smaller viewports I changed .metaslider.slides img to 50% to make images smaller but I’m not able to change the margin that’s been set in the widget because of inline !important.

    Where can I fix this?

    https://wordpress.org/plugins/ml-slider-lightbox/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Contributor matchalabs

    (@matchalabs)

    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 – http://persp.thecomputerdr.ca/destinations/kingston

    Plugin Contributor matchalabs

    (@matchalabs)

    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.

    http://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

    Plugin Contributor matchalabs

    (@matchalabs)

    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://wordpress.org/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?

    Plugin Contributor matchalabs

    (@matchalabs)

    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.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘.slides li margin isn't responsive?’ is closed to new replies.