Hello,
I am looking to get some help with the Enfold App Demo. I have deployed this demo and am having issues (like many others here) with displaying the 4 fixed background iPhone images which scroll and wipe the screen as you go down for a very cool effect.
As has been discussed, this works very nicely on the desktop, but not on mobile devices. I have found on here a quick CSS that works for disabling these background images on a standard iPad. I am using the following code:
@media only screen and (max-width: 1024px) {.responsive #top .av-hide-on-mobile, .responsive #top desktop.only .av-hide-on-tablet {display: none !important;}}
The problem, however, is that larger iPads like the iPad Pro (1366×1024) and Microsoft Surface Pro (1440×1024) have larger dimensions so this code does not work to disable the images on larger tablets. If I made the pixel max-width larger in this quick CSS then it won’t show on many desktops either…
Is there a solution to this? I would like to disable by device type, like all mobile/tablets/touchscreen devices instead of by pixel size.