Support » Plugin: Meteor Slides » Fully responsive update?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Josh Leuze

    (@jleuze)

    Hi, the Meteor Slides slideshows are fully responsive, but they still have a maximum size so they won’t stretch to 100% of the width.

    If you want a slideshow that fills 100% of the width or height of a page, you probably want a fullscreen background slideshow? There are specialized slideshows that do this that I would use instead of Meteor Slides.

    Thread Starter Dave

    (@deeve007)

    Nope, don’t want full screen background, simply one that is fully responsive so – for example – if my homepage slider is supposed to go full width, I can specify an image of, say, 1200 or 1600 pixels wide and know that someone viewing on a wider screen will still get a full width image. This isn’t an uncommon situation, probably around half the sites I develop are like this.

    Thread Starter Dave

    (@deeve007)

    Strange, I posted this as a new topic but has disappeared?? Will try adding to this one.

    How to make Meteor Slides responsive

    I am hoping a dynamic version of this code can be incorporated into the source code so the plugin becomes truly responsive, but in the meantime here’s how to do it via your CSS stylesheet for a specific site…

    #meteor-slideshow, .mslide {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 38.9%;
    }
    #meteor-slideshow img {
    width: 100% !important;
    height: auto !important;
    }

    The line you will need to adjust depending on your site’s image dimensions is this one: padding-bottom: 38.9%;

    I worked it out this way:
    My image width was 1200px.
    Image height was 465px.
    465/1200 x 100 = 38.9%.

    I’ve tested it and it seems to work cross browser, but if anyone comes across any issues please let me know.

    Cheers.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Fully responsive update?’ is closed to new replies.