For those wanting a truly responsive Meteor Slides

  • Dave

    (@deeve007)


    10 years ago

    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: 39%;

    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.

    https://wordpress.org/plugins/meteor-slides/

  • The topic ‘For those wanting a truly responsive Meteor Slides’ is closed to new replies.