WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
Space above slider (15 posts)

  1. cevans6
    Member
    Posted 2 years ago #

    Hi. Sorry I can't figure this out. I am trying to reduce the space above the slider. In the theme CSS, the .page-header margin and padding are set where I want them. In other words, when it's just text on the page, the text is positioned exactly where I want it to be. When I add in the Meteor slider, the slider has too much white space on top of it. I don't know where to go in the code to fix this.

    Thanks!

    http://arlingtonyouthsymphony.org/

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

  2. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    Hi, thanks for trying my plugin. The problem is that there are code tags wrapped around the slideshow shortcode. These can mess with the layout of the slideshow sometimes, in this case there is an empty paragraph above the shortcode that is adding this space.

    Switch from the visual editor to the HTML editor for that page and remove the code tags wrapped around the shortcode, make sure the shortcode is on the first line of the page and it should layout correctly.

  3. cevans6
    Member
    Posted 2 years ago #

    That was it! Thank you for the amazing support.

  4. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    No problem!

  5. proverbs31woman
    Member
    Posted 2 years ago #

    I also have this problem at http://lifeagain.com.au/ but there is no empty paragraph code. This is what I have:

    <p style="text-align: center;">[meteor_slideshow]</p>
    <p align="center"><img src="http://www.lifeagain.com.au/linkedin.png" alt="" width="48" height="48" border="0" /> <img src="http://www.lifeagain.com.au/facebook.png" alt="" width="48" height="48" /> <img src="http://www.lifeagain.com.au/twitter.png" alt="" width="48" height="48" /></p>
    <p align="center">Subscribe to our Newsletter</p>

    So is there anything else I can do to remove the empty space above the slideshow please?

  6. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    I see some code tags on your page around the slideshow, doublecheck that and see if there are any that need to be removed.

    The shortcode should be on a line all by itself, don't wrap a paragraph tag around it. If you want to center it, use CSS, try adding this to your theme's stylesheet:

    .meteor-slides {
    margin: 0 auto;
    }
  7. proverbs31woman
    Member
    Posted 2 years ago #

    The interesting thing is I didn't add any code other than what I was given for the slideshow so not sure how the code got in there.

    However, I've removed the extraneous code and added the code you mentioned into the stylesheet. The image moves to the centre when first viewing the homepage and then jumps back to the left again. What else can I do to get it to stay centred please?

  8. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    Try making the rule more specific:

    #wrap .meteor-slides {
    margin: 0 auto;
    }
  9. proverbs31woman
    Member
    Posted 2 years ago #

    I really can't see how that's going to centre the slides. Wouldn't you need a code that has the word 'center' in it? I'm not a code writer but that's what I thought it would need?

    I'll try what you suggest though. Thanks.

  10. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    That code centers the main slideshow container with all the slides in it.

    This is one of those quirks of CSS, it is good at styling text, but was not really designed to style whole sites and do layout. You can use text-align: center; to center text and other inline elements, but not block level elements like divs.

    So you have to "cheat" a bit and use auto margins. What that CSS does is, it sets the top and bottom margin of the slideshow container to "0", and the left and right margin to "auto". So if the slideshow is 200px wide and is in a space that is 400px wide, it will automatically set the left and right margins to 100px each. The byproduct of this is that the slideshow is centered.

    Sorry, that's way too much information, but now you know :)

  11. proverbs31woman
    Member
    Posted 2 years ago #

    Ok, that did do it. Thank you so much!

    But I have now dead space above it now before the menu tabs. Is there any way to move it closer? Is there padding I should be removing or making smaller? I'm not really sure what I should be looking for.

  12. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    There is some dead space in there from this code which is above the slideshow, but in the editor it might actually be wrapped around it:

    <p style="text-align: center;"></p>

    Removing that will get rid of the extra space above it in the content, the rest is part of the design, top and bottom margins on the header and inner divs.

  13. proverbs31woman
    Member
    Posted 2 years ago #

    I should have said thank you for the detailed response and explanation too - really appreciate.

  14. proverbs31woman
    Member
    Posted 2 years ago #

    Ok, will go look for that. Thank you. I've removed it and hopefully the owner of the site will be happy with that. Thanks once again.

  15. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    You're welcome!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic