WordPress.org

Ready to get started?Download WordPress

Forums

Slideshow
[resolved] Issues with mobile resizing of the slideshow. (18 posts)

  1. Constantin Potorac
    Member
    Posted 1 year ago #

    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:

    http://freshersmag.com/

    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.

    http://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/

  2. Constantin Potorac
    Member
    Posted 1 year ago #

    Anyone with a solution for the mobile resizing?

  3. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    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

  4. Constantin Potorac
    Member
    Posted 1 year ago #

    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.

  5. BretS
    Member
    Posted 1 year ago #

    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.

  6. hgrat
    Member
    Posted 1 year ago #

    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.

  7. bmaydesign
    Member
    Posted 11 months ago #

    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

  8. Stefan Boonstra
    Member
    Plugin Author

    Posted 11 months ago #

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

  9. bmaydesign
    Member
    Posted 11 months ago #

  10. bmaydesign
    Member
    Posted 11 months ago #

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

    Thanks!

  11. Stefan Boonstra
    Member
    Plugin Author

    Posted 11 months ago #

    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.

  12. bmaydesign
    Member
    Posted 11 months ago #

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

  13. bmaydesign
    Member
    Posted 11 months ago #

    Will it still work fine on the computer version though?

  14. Stefan Boonstra
    Member
    Plugin Author

    Posted 11 months ago #

    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.

  15. bmaydesign
    Member
    Posted 11 months ago #

    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.

  16. bmaydesign
    Member
    Posted 11 months ago #

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

  17. Stefan Boonstra
    Member
    Plugin Author

    Posted 11 months ago #

    Yes, that's okay.

    The difference in width is a problem with mobile devices and squishing multiple images in a row indeed. I'll add an option to solve this problem soon.

  18. bmaydesign
    Member
    Posted 11 months ago #

    Ok thanks for all your help. I really appreciate it.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic