slider height on mobile is showing wrong, the height is to low, i disable all plugins, i added a new row and a new slider same effect. On homepage : cadarmarius.ro
Hello,
I also have the same problem and my client is contesting me
Mobile big slider: image is crushed – it’s not responsive
Can you help me solve the problem?
thank you so much!
Gianluca
http://www.tabloit.it/nuovo/
-
This reply was modified 9 years by
arredoannunci.
Hello,
This is the way the slider is implemented on mobile devices. It has the same behavior on our demo page: https://demo.tagdiv.com/newspaper/ios-slider/
I will add this to our list for future updates and see if we can change the responsive nature of the thumb, Until then you can adjust the slider image height on mobile devices using this css:
@media (max-width: 500px){
.iosSlider-col-3 .td_module_slide .td-module-thumb, .iosSlider-col-3 .td_module_slide .entry-thumb {
height: 120%;
}
You can add the code in the theme panel-> custom css box.
Thank you!
Hello,
First of all, thank you for having responded to me
I have entered the css code
but it does not work
Mobile slider is always crushed
Hello arredoannunci,
The code provided above will work only if your iOs element is for 3 columns. Notice that if you will use it on 2 or 1 column you should only change the number 3, which one do you want. -> https://www.screencast.com/t/vIRUIDEc
Hope this helps!
Thanks for the message!
Is on 3 columns and not work, same thing in your exmaple, the one in 3 columns is with the height lower and the image has unnatural look. Just resize the browser and see. so i think slider has some problems.
@media (max-width: 500px){.iosSlider-col-3 .td_module_slide .td-module-thumb, .iosSlider-col-3 .td_module_slide .entry-thumb {height: 120%;}}
I addded } at the end because it was giving an error, but still no change.
And on mobile there is another problem, sometimes i get blank image in slider while i navigate trough slides.
Hello cadarmarius,
Notice that if you are using the mobile theme, the slider will not be recognized because the mobile theme has not been designed to use these elements. For more information about our mobile theme, please check our useful documentation here -> https://forum.tagdiv.com/the-mobile-theme/ Also, if is not what you mean, please provide your website URL so I can take a closer look at it and also, so I will be able to provide a more accurate response.
Thanks for the message!
Already solved the problem by using revolution slider : https://cadarmarius.ro/ – this was the link of the website. But you can check arredoannunci website, as his website is exactly the same on mobile. Thanks.
Exactly, as wrote cadarmarius
I do not use the mobile template
The slide remains crushed when viewed from the phone
Css code does not work
Thanks.
Hi,
Please try it like this, it should increase the height of the slider
– https://www.screencast.com/t/zQGkudigT
I have also modified the z-index to make the side sharing that you have display on top of the slider (if you don’t want that just remove it from the code)
@media (max-width: 500px) {
.iosSlider-col-3 .entry-thumb,
.iosSlider-col-3,
.iosSlider-col-3 .td_module_slide {
height: 250px!important;
z-index: auto!important;
}}
You can enter the code normally in Theme Panel->Custom Css section.
Thanks