Support » Plugin: Slideshow » Issues with mobile resizing of the slideshow.

  • Resolved Constantin Potorac


    Hey there,

    I am the owner of the FreshersMag online magazine and we are using your awesome plugin to show off some of the featured posts. We are really happy with result we got with the plugin though the only issue we are having is getting it to work properly on the mobile versions.

    You can view the website here:

    As you can see we left the height to the standards 200 though on the mobile version the image keeps the 200 though stretches. We really love the plugin as it provide exactly what we needed for our magazine but this specific issue is a big problem.

    If there is not way at the moment to make mobile version scale properly than do you have any idea how we can remove the slideshow from the mobile version and have it not show at all? We want to keep the desktop version though we could have it removed from the mobile if possible.

    Looking forward for your reply.

Viewing 15 replies - 1 through 15 (of 17 total)
  • Constantin Potorac


    Anyone with a solution for the mobile resizing?

    Plugin Author Stefan Boonstra



    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,

    Constantin Potorac


    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

    Plugin Author Stefan Boonstra


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

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


    Plugin Author Stefan Boonstra


    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?

    Plugin Author Stefan Boonstra


    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.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Issues with mobile resizing of the slideshow.’ is closed to new replies.