Slideshow Not Working As Expected

HTML & CSS
1

Good Afternoon

I have not been able to fix the following issue. I believe that it is a css issue, but it may well be javascript. I have installed a slideshow on the following website : -

http://tinyurl.com/lq7buz9

I cannot get the slideshow to work correctly, the image is tucked in behind the caption. I’ve tried to move it across, so that the image is to the right of the caption.

I thank any in advance for their help, would anyone be able to point me in the right direction?

Thank you

2

On .slides (whether in Javascript or CSS (probably do it in Javascript since it appears to set the .slides CSS in there)) you need to remove the width:100% it sets (or change it to auto, your choice. Removing would be best.

Then add margin-left:340px (the caption is 280px width and 30px left and right padding which equals 340px.)

3

Hi,

I would think that the image is supposed to go underneath the caption because that’s the way that these types of slideshow usually work.

As Ryan suggests you can probably force the issue but remember that you have a resonsive site so moving the image will break smaller screen views.

You could do something like this with media queries though and reset the margins at smaller screen sizes (because the caption is removed at those sizes).

ul.slides{width:auto!important;margin-left:344px!important;}
@media screen and (max-width:769px){
ul.slides{width:100%!important;margin-left:0!important;}
}

You will need to check that the code doesn’t have any unwanted side effects.

4

Thank you so much guys.

I’m working on this now, I’ll send an update through.

Many Thanks