There are small but powerful CSS tricks that can get us out of big trouble.
In particular, the code to disable web elements using simple CSS can save us a lot of headaches when an element doesn’t work properly in its responsive version.
In the following example, I have disabled the “Layer Slider” for WordPress on tablet and mobile versions. I simply located the element (.ls-container) corresponding to the “Layer Slider” and included the following lines of code in the child theme’s stylesheet:
@media handheld, only screen and (max-width: 767px) {
.ls-container {
display:none;
}
}
@media only screen and (max-width: 1023px) {
.ls-container {
display:none;
}
}
Voilá! Testing with mobiletest.me, I can see that the element has disappeared without any issues.
The same applies to any part of the template we want to remove from our mobile version.
