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 🙂
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?
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.
No, I’m using the Custom Header function to add static images to the non-Home pages.
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!
Weird. Glad you’ve sorted it anyway 🙂 Well done catching that one, easy to miss.
