In this video I’m going to show you how to remove a background image only on mobile devices.
By default Elementor doesn’t give you an option to toggle the use of background images per device.
This trick can be helpful if you need to change the look of your website on mobile devices or in my use case I wanted to remove a background image because it helped with my mobile page performance and gave me a boost in loading times.
The great thing about this trick is it’s just 1 line of CSS code and be used on either Elementor Pro or the free version of Elementor.
Elementor Pro Code:
@media (max-width: 767px) {selector { background-image:none!important;background-color: #5D9CC5;}}
Elementor Free Code:
@media (max-width: 767px) {.mobilebg { background-image:none!important;background-color: #5D9CC5;}}
Timestamps:
- 0:00 Introduction
- 1:43 Elementor Pro Example
- 4:50 Elementor Free Example