jquery revolution slider image larger than slot (missing 8px)

1.8k views Asked by At

we use revolution slider 2.2. We now see something strange. Our base image is 1920x300px and this is ofcourse resized to other screensizes. If the sliders is opened with browser screen width 1397px (image 218 high) then the image in the slotholder is absolutely aligned left:-25px. The slotholder div fullbannerwidth width is 1394 px (with slot 200 high). Because of this we are missign 8px of the image at the bottom.

Please find an example image below.

My question: has anyone experience this before? Must I now resize the image to fit 210? or should I resize the slotholder to fit 218?

Anyhow I am going through all the code. It is not set in css. Not in html. But (I think) in the revolution slider css. Or is there a setting to disable the -25px left positioning?

(I hope this all is a little clear)

Code example provided too

<div class="slider">
 <div class="fullwidthbanner-container">

 <!-- see the 210 PX HERE -->
 <div class="fullwidthbanner revslider-initialised tp-simpleresponsive hovered" style="height: 210px;overflow: visible;">
   <ul style="display: block;">
    <li data-transition="boxslide" data-link="/link" data-target="_self" style="visibility: visible; left: 0px; top: 0px; z-index: 18; opacity: 1;">

  <div class="slotholder">

  <!-- see the 218 PX + LEFT: -24px (changes betw 24 and 25) HERE -->
  <img src="image.png" alt="alt" width="1920" height="300" class="defaultimg" style="width: 1395.2px; height: 218px; position: absolute; left: -24px; opacity: 0; top: 0px;">

</div><div class="tp-caption sft slidelink" style="z-index: 2; cursor: pointer; font-size: 8.41875px; padding: 0px; margin: 0px; border: 0px; line-height: 11.6266666666667px; white-space: nowrap; opacity: 0; left: 0px; top: -50px; transform: scale(1, 1) rotate(0deg); visibility: hidden;" data-x="0" data-y="0" data-linktoslide="no" data-start="0"><a target="_self" href=""><div></div></a></div></li>
</ul>
<div class="tp-bannertimer tp-top" style="width: 60.1525423728814%; overflow: hidden;"></div>
<div class="tp-loader" style="display: none;"></div></div>
<div class="tp-bannershadow tp-shadow1" style="width: 1347px;"></div><div class="tp-bullets simplebullets round" style="visibility: visible; width: 62px; left: 642.5px; bottom: -9.8px; opacity: 0;"><div class="bullet first"></div><div class="bullet"></div><div class="bullet"></div><div class="bullet last selected"></div><div style="clear:both"></div></div><div style="visibility: visible; position: absolute; left: 0px; top: 105px; opacity: 0;" class="tp-leftarrow tparrows round large"></div><div style="visibility: visible; position: absolute; left: 1269px; top: 105px; opacity: 0;" class="tp-rightarrow tparrows round large"></div></div>
</div>

enter image description here

1

There are 1 answers

0
ThemePunch On BEST ANSWER

You use a very old version of the slider. There are over 20+ updates available since v.2.2, Please update to version 4.6.5 which will fix any kind of position, resizing or gapping bugs. If the issues still exist after your updates, please feel free to contact us at http://themepunch.com/support-center

Thanks and greetings from ThemePunch !