RevSlider Problem Responsive Sizes

[helloweb31]

Hi,

I am using a 2/3 RevSlider on my page. Next to the slider is a 1/3 accordion. The slider size ratio is 3:2. The site is in boxed layout and responsive mode is switched on in the general theme options and also in the Revslider options.

The site looks fine on a big screen (e.g. 1920*1200) as well as on a small screen like e.g. an iphone, but on the in-between sizes (e.g. ipad horizontal and vertival mode) the slider cuts into the accordion section and the slider images overlap the accordion text.

I have put the Revslider to responsive mode and used the following resolutions:
780*520
570*380
540*360
480*320
420*280
300*200

Please, assist how to define ideally.

All my slides are in 3:2 size ratio

What to do?

[helloweb31]

This reply has been marked as private.

[Ben – SUPPORT]

Add this code into your general settings -> Custom css

#rev_slider_9_1, #rev_slider_9_1_wrapper{
width:100% !important;
}
.tp-simpleresponsive .slotholder *, .tp-simpleresponsive img{
width:100% !important;
height:100% !important;
}

This will make the images and slider correct at all rezes 🙂

Thanks
Ben

[helloweb31]

Dear Ben,

Thanks for your assistance.

Your code sets the image resolution to the right size. Great.

BUT, there are two problems:
1- I use the Box Slide transition for all my slide. Suddenly after adding your custom css, all my slides use a very simple horizontal slide transition (flying in from the left). In the Revslider Slide Options I see the Box Slide transition correctly set, but it still uses the mentioned simple slide transition.
How to correct?

2- the image is now well proportioned and respects the text borders for several tested screen resolutions as well as for example the ipad. But, there is still one problem: it works fine for iphone in vertical mode (like I ), but fpr iphone in horizontal mode (widescreen) it makes my picture go from the initial correct 3:2 (width:height) ratio to 3:3 ratio and thus blurs the picture out of proportion.
How to correct?

[helloweb31]

This reply has been marked as private.

[helloweb31]

This reply has been marked as private.

[helloweb31]

Another update:
I erased the css you recommended to me earlier and tried to work out the corect widths in the responsive sizes setting in revslider. This helped a lot and the nice box transition effect is back & working fine.

Now the big question is:
Do you have the ideal values for the responsive sizes for your theme/bootstrap framework for
full-width sliders and 2/3 width sliders?

I guess this would be a very helpful information for many users.

[Cosmin – SUPPORT]

Hey,

Here’s the media queries that the custom Twitter Bootstrap framework in our theme is using, I hope they are pretty self-explanatory:

@media (min-width: 768px) and (max-width: 979px)

@media (max-width: 767px)

@media (max-width: 480px)

@media (max-width: 979px)

@media (min-width: 980px)

So, from bottom up: 0-480px, 0-767px, 0-979px, 768-979px and 980px+

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[helloweb31]

This reply has been marked as private.

[helloweb31]

Any update on my question?

[Ben – SUPPORT]

Sorry, where are you trying to input these sizes?

Thanks
Ben

[helloweb31]

This reply has been marked as private.

[helloweb31]

This reply has been marked as private.

[Cosmin – SUPPORT]

This reply has been marked as private.