WordPress.org

Forums

Slideshow
[resolved] Problems with responsive design on mobiles/tablet (11 posts)

  1. RTHaworth
    Member
    Posted 1 year ago #

    Hi stefan, great job with the slideshow, its so detailed and customizable, really good work!

    I have set the slider to be responsive, to fit in with my responsive site design. It works great on the full width site, however the image isnt resizing to the right place (although it is the right size). any chance you could take a look on a mobile device and give me a hint?

    Here is the problem page:

    http://theribblevalleyfoodie.co.uk/about/

    Many thanks, Richard

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

  2. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    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

  3. RTHaworth
    Member
    Posted 1 year ago #

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

  4. RTHaworth
    Member
    Posted 1 year ago #

    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?

  5. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    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

  6. RTHaworth
    Member
    Posted 1 year ago #

    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

  7. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    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

  8. RTHaworth
    Member
    Posted 1 year ago #

    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.

  9. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    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

  10. carriejeeze
    Member
    Posted 1 year ago #

    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.

  11. carriejeeze
    Member
    Posted 1 year ago #

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Slideshow
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.