This support ticket is created Il y a 8 années et 10 mois. There's a good chance that you are reading advice that it now obsolete.
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
Even I add <div class="sidebar-banner"> for [wpv-post-featured-image class="img-responsive" size="full"] but it only change width to the image but not to the wp-view-layout.
After a while the page loaded, it is because of the slide transition, the width of wp-view-layout is reseted,
How can I keep the slide in 50% width on mobile view?
Sorry I am unable to watch the video, browser keeps loading and then halts.
However, as I suspect, if you are using more than one images on a single slide, there may be an issue due to image heights. What if you try with fixed height images? As far as the resulting slides are of the same height, there should be no page juggling.
All images to the slider are in same height. It is difficult to explain in word for the problem, I try to put the .mp4 on dropbox and share to you. Hope you can see the video and understand the problem.
Thank you for sharing the videos, I was able to watch and have understand the problem.
Have you disabled the animation on the site? Since I tried to investigate and looks like there was no change in slides. Can you please enable again and allow me a temporary access to the site? As well as, please mention the view/content template in question.
I have enabled your next reply as private, please input all details in that area, thanks.
I think I have applied some correct solution. First of all I checked your View and Content Template, these look fine. However, I added following CSS to your content template 'Sidebar'
@media only screen and (max-width: 769px) {
div#banner_slider_div div[id^="wpv-view-layout"] {
width: 100%!important;
display: block;
float: left;
}
}
This is the same CSS as you mentioned previously, but I made a little change for 'width' definition. I made the banner DIVs 100%, so these are stacked on each other.
The animation was stopped, because there was only 1 banner in each category (it wasn't an error). I added a banner in category 'sidebar-banner-b' (Test Toolset with red car image) and you can see the 2nd banner area rotating.
The issue, which was you originally showed in the video (the jumbling of the page upon banner rotation) happens only first time now - since all images are not loaded. As the first cycle is completed, it works smoothly.
To overcome this first time jumbling also, I added 'height' to the above CSS as below:
@media only screen and (max-width: 769px) {
div#banner_slider_div div[id^="wpv-view-layout"] {
width: 100%!important;
display: block;
float: left;
height: 95px!important;
}
}
Which reserved that height even if there was no content. So this issue was also fixed. So I will suggest to use height of the banner DIV to reserve the place before hand, so between the transition of 2 slides (banners) the container remains in place.
Please notice the .wpv_slide_remove class added in above CSS. That is a DIV element which appears so fast, and replaces the wpv-view-layout DIV, and does some transition unless the effect is complete. I caught it by increasing the transition effect delay upto 50 seconds (50000 ms). And enforced it to retain the same place as of the banner DIV.
So now it doesn't make the page to jumble 🙂
I have restored the original delays for banner rotation and fade effect after that. Hopefully, the matter is fixed now.
Many thanks for your support. As I have both full width and half width banner on same page, to avoid affecting the full width banner, it is better to have more specific style element declaration. So I add as below.
div#banner_slider_div .wpv_slide_remove
Although it solved this banner change issue, I think it may not the ultimate solution because once I change the Transition effect from Fade to other, then the problem is still occurred.
Yes you are right, for each effect in use, you may want to handle the particular DIV accordingly. I will suggest to increase the delay of effect as much as possible and look for the affecting DIV using inspect element. So you can catch the DIV and apply the particular style.
Hope it can be put into the new request for the development. It is quit hard to handle the effect with CSS if we offer the end-user to change the slide effect.
Or there is some recommended style for each effect?
There's actually no recommended style, since these are the builtin functionality for each style. However, such improvements are already in progress. You may find new versions more improved on these grounds.
