I have a problem where I have a background from a certain background image that keeps on automatically added via JavaScript by an external plugin that we can’t remove or deactivate. The background image supposedly to only show up only in tablets and mobiles. This means, I have to resort in making a Media Query to remove the background image.
To be more specific, the goal here is that:
1. The background doesn’t appear in desktops
2. The background appears in tablet and mobile.
3. Background to appear in iPad with more than 1000px min-width.
Here’s a sample of technically what I did: https://codepen.io/Kismet/pen/Zryjpo
The min-width: 1000px works with desktop. But the problem here is that the BG image also disappears on iPad that has more than 1000px screen width.
I was thinking of overriding it with:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.sample {
background-image: url(“https://s10.postimg.org/7cuel0v2x/forrest-cavale-13484.jpg”) !important;
}
But this just made the background image to appear in the desktop again.
Is it still possible to resolve this kind of issue with Media Query or do I already have to use User Agent on this?
Thanks for your insights! :)
(Sorry I also did a couple of edits and this topic was deleted earlier)
