Hi totalfly, can you check to make sure the following option Enable responsiveness (Shrink slideshow’s width when page’s width shrinks) is set to Yes under Display Settings.
Thread Starter
Advex
(@totalfly)
Hi mbrsolution,
yes, the option is enable.. i tried any kind of option in the settings but the best result was only to have a shrink slideshow centered in a wide area..
i think i have to modify something in the php or css, but i’m not a programmer and i don’t know what to change and where to change 🙁
Hi can you share your URL.
Thank you
Thread Starter
Advex
(@totalfly)
you can login in store.totalfly.net/wp-admin user test password test1234
and then check the homepage.. store.totalfly.net
Hi, it is not recommended to share your login details here. However I have logged in and checked the slideshow as per your instructions above.
Edit the following class
slideshow_container slideshow_container_style-light and change the max-width: value as you see below.
element.style {
height: 400px;
max-width: 750px; ......change this value to 100%
width: 750px;
}
Is your theme responsive? If not are you using a responsive plugin?
Thread Starter
Advex
(@totalfly)
don’t worry.. it’s a test login for subscribers.. anyway will be delete soon..
i edited the file slideshow-jquery-image-gallery/css/style-light.css
but i didn’t find element.style class..
have i to add it?
Yes you have to add it. If you use firebug in Firefox you will see what I mean.
Thread Starter
Advex
(@totalfly)
not working yet..
in the /wp-content/plugins/slideshow-jquery-image-gallery/css/style-light.css
after the firts row where there is
.slideshow_container_style-light { }
i added
element.style {
height: 400px;
width: 750px;
max-width: 100%;
}
but is not working.. sorry but i’m not a programmer so i hope to have done everything well..
Hi try the following..
.slideshow_container, .slideshow_container_style-light {
height: 400px;
max-width: 750px; ......change this value to 100%
width: 750px;
}
Thread Starter
Advex
(@totalfly)
.slideshow_container_style-light { }
.slideshow_container, .slideshow_container_style-light {
height: 400px;
max-width: 100%;
width: 750px;
}
not working.. try to check you too.. 🙁
I don’t think you have to make any changes to the stylesheets.
Your slideshow is set to be 400 pixels tall. In desktop view this is a good setting, as the images in your slideshow are 750×400 pixels. In mobile view however, the width of the slideshow decreases to fit the width of the website, but the height of the slideshow stays the same (400 pixels). This leaves a white gap below the slideshow.
To solve this issue, you need to set the “Shrink slideshow’s height when width shrinks” setting of the slideshow to “Yes”. A new setting will appear: “Proportional relationship between slideshow’s width and height”. Set this setting to “750/400”, which will make the slideshow scale the same way as your images.
Thread Starter
Advex
(@totalfly)
thank you so much but even this is not working..
I’m sorry, my post above solves what I thought was the problem: it removed the whitespace below the slideshow.
I now see what you meant in your original post. The slideshow starts out way too wide on mobile devices indeed. I’ll have a look into the code to see what’s causing this issue, and I will let you know when I find anything.
The problem seems to be the element in which the slideshow is placed. The element seems to start out too wide, but adjusts to the correct width later on in the loading process of the page. At this point the slideshow is too wide already and doesn’t adjust its size anymore until the page is resized.
I have made some changes to the slideshow plugin that may solve your problem, but I have not been able to test them as I could not reproduce the problem locally. Could you please test if these changes solve your problem by downloading and installing the slideshow plugin from this location?
Thread Starter
Advex
(@totalfly)
Great Stefan!!!
It work now! 🙂
there is just a little problem but i think is not a big deal..
when i open the page on the iphone, the image load at 750 px and then it resize.. but ok.. the final result is what i was expecting 😉
