How to disable section background images for mobile

[Werther]

Hi guys,

Thanks for the great theme.

How may I remove the section background images for mobile view?
I don’t want them loaded at all. I want to use the section background color only.

Resizing etc may seem working fine on theme pro; but large size high-quality backgrounds for desktop views create mobile performance issues according to Google lighthouse audit.

Thanks

[thai]

Hi There,

Please add the following code under Pro > Theme Options > JS:

(function($){
	$(document).ready(function($) {
		if($(window).width() < 481){
			$(".bg-image").css("background-image", "");
		}
	});
})(jQuery);

Hope it helps

[Werther]

Hi Thai,

Thanks for the quick reply.
But unfortunately didn’t work. I still see the background images when I check my website on my smartphone.

[thai]

Hi There,

Sorry for the confusion!

Please update the previous code to this:

(function($){
	$(document).ready(function($) {
		if($(window).width() < 481){
			$("div.x-bg").remove();
		}
	});
})(jQuery);

Let us know how it goes!

[Werther]

Hi Thai,

Indeed it worked, thanks!
Just one comment, we can not visualize it through configuration panel (clicking on like mobile icon > selecting small screens).
But on my smartphone I can validate it worked.

[paul.r]

Hi,

You can try changing the code to this.

$(window).on("resize", function () {
    if($(window).width() < 481){
	$("div.x-bg").remove();
    }
}).resize();

Hope that helps.

[Werther]

one last comment and then I will leave
How to remove background image on mobile, only for specific sections, not all of them?

[Prasant]

Hello @Werther,

Thanks for asking.

I suggest you to add class name to Section under Customize > Class. https://cloudup.com/ctFqoctV-F5

After that, please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .mobile-remove [class^="x-bg"]{
        background-image: none !important;
    }
}

You can change class name mobile-remove as per your preference.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.