Slider Content overlapping on mobile devices

Hi, I have enabled the parallax slider on my site. Using a mobile device or a small browser window the content of the slider gets messed up and overlaps. How could you fix this, so that the content will be displayed clearly like on a normal desktop or laptop screen?
If you can’t fix this, how can you disable the Slider on smaller screens?
Is there any code or a plugin to disable the slider on small screens? I found this Code online, but I don’t know how to customize it to work for this slider.

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
.avia-layerslider {
display: none !important;
}
}

I would really appreciate any help. Thanks