Hi there :)
The slider on linked page is not being properly shown on mobile devices. Could you please help figure out what Im doing wrong? thank you in advance!
Hey Gurify!
Thank you for using Enfold.
You have this code on Quick CSS:
@media only screen and (max-width: 767px) {
.avia-slideshow-inner {
height: 250px !important;
}
}
You can remove that or replace it with this:
@media only screen and (max-width: 767px) {
.avia-slideshow-inner, .avia-slideshow-inner li, .avia-slideshow-inner li img {
height: 250px !important;
}
}
Unfortunately, this will distort the images.
Best regards,
Ismael
Hi, its not working. When I resize it, the content in the slider disappears and its only visible partially.
Thank you in advance
Hey!
Resize the captions with this:
@media only screen and (max-width: 479px) {
.responsive #top .slideshow_caption h2 {
font-size: 15px !important;
}
.responsive #top .slideshow_caption .avia-caption-content {
font-size: 10px !important;
}
}
Or hide them on mobile device with this because they are covering the background image:
@media only screen and (max-width: 479px) {
.responsive #top .slideshow_caption .avia-caption-content, responsive #top .slideshow_caption h2 {
display: none !important;
}
}
Best regards,
Ismael