WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Centering Slideshow in Responsive Template (10 posts)

  1. LeeWiley
    Member
    Posted 1 year ago #

    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 :)

    Hi!

    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 -
    .meteor-slides
    {
    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 http://wileyillustration.com/?page_id=86

    thank you in advance for any help.

    http://wordpress.org/extend/plugins/meteor-slides/

  2. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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>
    <pre>	
    
    	<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">
    
    <pre>
    
    	<div id="meteor-slideshow" class="meteor-slides  navprevnext"></pre>
  3. LeeWiley
    Member
    Posted 1 year ago #

    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">
    
    <pre>
    
    <div id="meteor-slideshow" class="meteor-slides navprevnext">
    
    [meteor_slideshow expiration-date]
    
    </pre>

    Unfortunately, it is still not centered, but I may have laid it out wrong.
    http://wileyillustration.com/?page_id=86

  4. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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"]
  5. LeeWiley
    Member
    Posted 1 year ago #

    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"]
    </div>
  6. hassekf
    Member
    Posted 1 year ago #

    You need to change the file located at

    http://wileyillustration.com/wp-content/plugins/meteor-slides/css/meteor-slides.css

    Search the line 17

    Change the following:

    margin: 0;

    to

    margin: 0 auto;

  7. LeeWiley
    Member
    Posted 1 year ago #

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

  8. hassekf
    Member
    Posted 1 year ago #

    No problem, glad to help :)

  9. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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;
    }
  10. LeeWiley
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic