Problems with responsive design on mobiles/tablet

Hi Richard,

Thanks for letting me know about this issue. It will be resolved in the next version of the plugin, which will be released some time next week.

Best regards,
Stefan

That’s very efficient and thanks for the speedy reply! What was the issue? Is it something I can fix temporarily with CSS?

Hi Stefan,

The update has changed my problem, but hasn’t fixed it. Previously the image displayed properly from the left (ie had some white space on the left of the slideshow, but not on the right. Now there is no white space at all. The slideshow has grown into areas that should be ‘margin’. Any ideas?

Hi Richard,

You’re right, I overlooked a value in your theme’s stylesheet that is keeping the image from centering correctly.

The next version of the slideshow plugin will fix the issue, but you could very easily apply the fix yourself by editing the slideshow’s functional stylesheet. The functional stylesheet is located in ‘wp-content/plugins/slideshow-jquery-image-gallery/style/SlideshowPlugin/functional.css‘. Simply add the following lines at the end of the stylesheet:

.slideshow_container .slideshow_view .slideshow_slide.slideshow_slide_image img {
  float: none;
}

As a side-note: I see you’ve wrapped your slideshow in an anchor tag (<a>), this causes all buttons in the slideshow to link to another page.

Best regards,
Stefan

Thanks for your kind help. I tried to implement that fix, but it did not fix my problem. On mobile (iphone) the slide show looks a mess on my website. There is no margin on the image left or right, a huge white spice below the slideshow, and the slideshow navigation is in the wrong place.

Previously it obeyed the padding of div.screenshot but now it just expands over it to fill div.screenshot

Please dont give up on me!

Thanks, Richard

Hi Richard,

The fix I provided was ment for the problem that occurs when the website is displayed in a window that’s about 980 pixels wide. Have you removed it from the functional stylesheet? I wasn’t able to find the lines in the file.

The other two issues you mentioned aren’t actually problems caused by the slideshow, they are the default behaviour of the slideshow.

As the slideshow will always try to fill up the entire width of the page, there needs to be CSS padding around the slideshow if you don’t want it expanding to the full width of the container. Your ‘screenshot’ element in this case.

When the browser window is wider than around 980 pixels, there is CSS padding on the ‘screenshot’ element. However, this CSS padding is changed when the website is smaller than around 980 pixels.

The white area below the slideshow exists because the ‘Shrink slideshow’s height when width shrinks’ setting is set to ‘No’ in your slideshow’s settings. Because of this the slideshow’s height is a fixed value.

Best regards,
Stefan

Hi Stefan,

Thanks for the continued support, I have made a nominal donation to your cause; buy yourself a beer!

I have managed to get the slideshow working just the way I wanted it now, thanks to your help.

Apart from that float, I had to override some of the resizing using media queries. Bit of a bodge but it works well on iphone now!

Thanks again, Richard.

Hi Richard,

Thank you very much for your donation, I surely will!

I’m glad to hear the slideshow now works like you wanted it to.

Best regards,
Stefan

Hi Stefan —

I’m a huge fan too… however…

“The white area below the slideshow exists because the ‘Shrink slideshow’s height when width shrinks’ setting is set to ‘No’ in your slideshow’s settings.”

When I set ‘Shrink slideshow’s height when width shrinks’ to ‘Yes’ the slideshow disappears from the page completely — everything works well when it’s set to “No’ except for the pesky space on the mobile display…

The arrows show, if they are enabled, but no slideshow.

I would love to be able to fix this last little problem…

Many thanks for your time & great work.

Website page is:

https://princevilleranch.com/new/family-and-company-history/