When using containers in Elementor, there is an option to have an image as the background of the container. There is also a built-in option to change the background image to another image depending on which device you are designing for. However, there are often times when you might want to hide the background image on a specific device, but not on another device. Unfortunately, there is no built-in option for hiding a background image on a specific device.
In this video, I explain how to hide background images on mobile devices but have them visible on all other devices with the help of some custom CSS. You can adjust the media query to target a specific screen size or device as per your requirements. If you would like the code used in this video, click the link below to my blog post about this topic, and you can copy and paste it to your website.
@media only screen and (max-width: 767px) {
.no-background-mobile {
background-image:none;
}
.no-background-mobile::before {
display:none;
}
}
