WordPress.org

1. LeeWiley
   Member
   Posted 7 months 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 7 months 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 7 months 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 7 months 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 7 months 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 7 months 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 7 months ago #
   

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

8. hassekf
   Member
   Posted 7 months ago #
   

   No problem, glad to help :)

9. Josh Leuze
   Member
   Plugin Author
   Posted 7 months 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 7 months ago #
    

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

Reply

You must log in to post.