-
-
Hello,
How can I make the Codeless Slider responsive?
This view is for an Apple iPhone 6.
I tried a custom media query but I was getting a huge white space between the slider and start of the body.
Always appreciate the help!
M
-
In addition to the above, is there a way to NOT show the slider at all on the mobile?
-
-
Hello,
Please edit he file ‘specular/js/main.js’, find the lines:
/* ----uncomment this if you want a min height for slider on responsive */ /* if($(window).width() < 767){ var window_width = $(window).width(); var new_height = (window_width * height) / 767; $('.codeless_slider_wrapper', parent).css('min-height', new_height+'px'); parent.css('min-height', new_height+'px'); parent.height(new_height+'px'); slider.height(new_height+'px'); } */
and replace with:
if($(window).width() < 767){ var window_width = $(window).width(); var new_height = (window_width * height) / 767; $('.codeless_slider_wrapper', parent).css('min-height', new_height+'px'); parent.css('min-height', new_height+'px'); parent.height(new_height+'px'); slider.height(new_height+'px'); }
(just remove the comments)
If you want to hide the slider on responsive please refer to this topic https://support.codeless.co/forums/topic/how-to-turn-off-slider-on-mobile-but-not-desktop-home-page/
Best regards!
-
-
Hello,
I had to come back to this question because I noticed with me uncommenting the above, it hasn’t quite kicked in yet. It seemed maybe it previously worked briefly.
I have it set that anything under 480 or so… no slider will show.
Any guidance would be appreciated.
Thanks,
M
-
Hello,
i fixed it. I added this code into your custom css box:
@media (max-width: 979px){ .swiper-slide.swiper-slide-visible.swiper-slide-active { width: 770px !important; height: 436px !important; } .codeless_slider_swiper.parallax_slider { height: 333px !important; min-height: 333px !important; } .parallax_slider .codeless_slider_wrapper { min-height: 545px;} .codeless_slider .swiper-slide .buttons.align-center { margin-top: -190px; left: 63% !important; } }
Please check your site.
Best regards!
-
You must be logged in to reply to this topic.