WordPress.org

Ready to get started?Download WordPress

Forums

Easing Slider "Lite"
[resolved] Top padding (7 posts)

  1. kelleypb
    Member
    Posted 1 year ago #

    The top padding in the two outer <div> tags requires that I use a negative top margin for the container <div> for the slideshow for it to align correctly. If I delete the padding in Firebug the slideshow disappears. Is there another solution to this? I don't understand the need for the padding.

    <div class="easingsliderlite-viewport" style="padding-top: 27.350427350427% !important;">

    http://wordpress.org/extend/plugins/easing-slider/

  2. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    It's a little CSS trick to maintain the slideshows aspect ratio whilst being responsive/resizing. A few other slideshow scripts employ a similar principal.

    Padding-top percentages used in this manner are relative to the slideshow's width. So for your particular slideshow, based on the dimensions you've set it too, the height is 27.35*% of the width.

    If the slideshow starts to resize and its width gets smaller, the height will remain at 27.35*% of the width, thus resizing whilst maintaining the aspect ratio.

    If we used the "height" CSS property instead, the height wouldn't change automatically when resizing, unless Javascript is used. This is because the "height" property is its own measure and not relative to the width.

    The approach we've taken means we don't need to do this, and less Javascript interference equals better performance and less code. The padding is essential to the plugins functionality and shouldn't cause any problems :)

  3. kelleypb
    Member
    Posted 1 year ago #

    Actually it causes problems for the custom header images on all the non-home pages because they are pushed up 12px which equals the -12px margin I had to add to the container div to make the slideshow line up correctly. Is there another solution to get a 0px top margin?

  4. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    It really shouldn't cause any problem, but unfortunately if so there isn't anything that can be done. To change this would require completely re-writing the plugin :(

    Are you displaying the slideshow on the non-homepage's also? If not, then it shouldn't be related to this.

  5. kelleypb
    Member
    Posted 1 year ago #

    No, I'm using the Custom Header function to add static images to the non-Home pages.

  6. kelleypb
    Member
    Posted 1 year ago #

    I solved it. There were to slash marks between the two PHP snippets for some reason that were causing the gap as seen below:

    <?php if(is_front_page() ) { ?>// <?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?><?php } ?>

    I deleted them and the formatting problem went away. Great plugin!

  7. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    Weird. Glad you've sorted it anyway :) Well done catching that one, easy to miss.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic