Support » Plugin: Meteor Slides » [Plugin: Meteor Slides] Centering Slideshow in Responsive Template

  • Resolved LeeWiley


    Disclaimer: I’m a total Noob to WP and responsive stuff. I’m not even super proficient in HTML/CSS. I’m a hack who has learned how to build pages through experimentation and observing code 🙂


    I’m building a responsive website using the Response template from CyberChimps, I have a page that I’m putting a slideshow on, and it looks beautiful except I cannot get the slideshow to be centered.

    I’m currently using this css styling on the “custom css” panel in the template –
    height: 100% !important;
    line-height: 0;
    margin: 0 auto;
    max-width: 100%;
    overflow: visible !important;
    padding: 0;
    position: relative;
    z-index: 1;

    The slideshow is on this page

    thank you in advance for any help.

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


    Hi Lee, those are some awesome illustrations!

    Are you using the slideshow shortcode? I’m seeing <pre> tags around the slideshow, this can happen when you copy/paste the shortcode from a webpage to the visual editor. try switching from the visual view to the HTML view, and check to make sure the shortcode is on a line by itself and doesn’t have code or pre tags wrapped around it.

    Also, I see an extra div wrapped around the slideshow that is missing a quote:

    <div id="meteor-slides>
    	<div id="meteor-slideshow" class="meteor-slides  navprevnext">

    It should be like this, though you don’t need the extra container to get the slideshow centered:

    <div id="meteor-slides">
    	<div id="meteor-slideshow" class="meteor-slides  navprevnext"></pre>

    Thank you so much!

    Okay, so I think I understand what you are saying, but I might be wrong.

    The shortcode for my slideshow is [meteor_slideshow expiration-date]

    So, I took what you had above and laid laid it out like this…

    <div id="meteor-slides">
    <div id="meteor-slideshow" class="meteor-slides navprevnext">
    [meteor_slideshow expiration-date]

    Unfortunately, it is still not centered, but I may have laid it out wrong.

    Plugin Author Josh Leuze


    Sorry, you want to remove those pre tags and anything else wrapped around the slideshow shortcode. Also, it looks like you might have the formatting wrong in the shortcode where you specified a slideshow. Try it like this:

    [meteor_slideshow slideshow="expiration-date"]

    Okay, so if I remove everything from around the shortcode, how do I now center it?

    Sorry, I’m such a Noob. I’ve currently tried it as seen below, but still no go on centering.

    <div id="meteor-slides">
    [meteor_slideshow slideshow="expiration-date"]

    You need to change the file located at

    Search the line 17

    Change the following:

    margin: 0;


    margin: 0 auto;

    Dude, thank you, that did the trick!
    Thank you both for helping the new guy!

    No problem, glad to help 🙂

    Plugin Author Josh Leuze


    Don’t edit it in the plugin though or you’ll lose the changes when you update the plugin. You can use a custom stylesheet to save your changes, but for just this one small change I’d add it to your theme’s stylesheet like this:

    div.meteor-slides {
    margin: 0 auto !important;

    Done and done! Thanks, man, that took care of it, and I won’t have to worry about update probs!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Plugin: Meteor Slides] Centering Slideshow in Responsive Template’ is closed to new replies.