Issues with mobile resizing of the slideshow.

Anyone with a solution for the mobile resizing?

Hi,

I’m sorry for the late response, I’ve been very busy.

Version 2.2.0 of Slideshow will be able to resize whenever the window resizes, so it will be a lot more mobile friendly.

Since this next version of Slideshow may not be here too soon, you could use a mobile device detection plugin on your website. I searched a little and this plugin was recommended often.

Your website looks great, by the way!

Best regards,
Stefan

Thank you for the reply Stefan and kind words about the website.

I tried the plugin you mentioned though that plugin completely changes the design of the mobile site into something really horrible looking. ??

Trying other plugins now and hopefully I find something that works… if not than we are so looking forward for the upcoming 2.2.0 of your plugin.

I had some success with setting the image width to 100% by adding a “%” after the 100 (as opposed to no units of measure). I had to leave the height in pixels, but this allows the slideshow to resize on my phone and table. The only thing to work around no is this leave a bunch of white space below the slideshow, on mobile browsers, equal to the “leftover” height of the image. So in my case, about 200px of the original 446px is blank space.
The controls are also below the image in my case (vertically centered, maybe?), although that is more of a plus for usability. To remove the space one could possibly use a Mobile Stylesheet that sets a negative top margin for whatever container is below the slideshow, like:
.textDIV { margin-top: -200px; }
I’m going to try that when I have some time and see what happens.

T remove the white space under the slideshow you can use media queries to control the height. It’s not pretty but it works. Note that the image will be croped to a fixed height.

Start with the smallest devices and for example add this code in your css file. You can use either min width or max width.

@media screen and (min-width: 320px) {
	.slideshow_container {height: 130px !important;}
}

Now every screen size above 320px will have a height of 130px. To increase the height you add a new media querie.

@media screen and (min-width: 520px) {
	.slideshow_container {height: 210px !important;}
}

You also need to change the following in the plugin css or add it to your own css file. The code crops the image.

.slideshow_container {overflow-y: hidden; }

I like this plugin and I’m looking forward to the update.

My slideshow does not appear on my mobile device at all. Is there anything I can do? I am using the plugin Slideshow Version 2.2.17

Coul you please provide a link to your website so I can see what could be causing this problem?

https://www.cerensbergerbuilder.com

Any chance you’ve had a moment to check this out?

Thanks!

Yes I have, thanks for the link.

On lines 382 through 384 in your theme’s ‘style.css’ file there are the following style rules:

.entry-content img, .comment-content img, .widget img {
	max-width: 100%; /* Fluid images for posts, comments, and widgets */
}

This gives the images a maximal width of 100%, which makes them too small to see when viewing the website on a mobile device. Removing those lines will fix the issue you’re having with the slideshow.

I will add a rule to bypass this problem in the next release of the slideshow, which should be some time next week.

Where do I find my theme’s style.css file?

Will it still work fine on the computer version though?

Your theme’s ‘style.css’ file should be located in: ‘wp-content/themes/attitude/’, on your server.

Yes, the slideshow will run fine on the computer version without the aforementioned style rule.

Hi Stefan, I found the theme’s style.css file and it worked! Thank you so much!

However, because I have 4 images for each “slide” they are a bit squished and cut off on my iphone. Would you recommend not creating slide shows where 4 images appear at once? It looks really good on the computer screen, but squished on the home page and project gallery page of the iphone. (Those are the only 2 pages with slide shows).

Thanks so much.

I found the style.css file on the wp dashboard under appearance, then editor. Assume it’s ok I did the editing there.