Enfold > Background image > Remove on mobile

Hi Ismael,

I have the same problem on tablets and mobile devices with firefox. Even after clearing the cache the background still shows on the whole page. I added the following css:

@media only screen and (max-width: 1024px) {
#contact { background-image: none!important; }}

Did I miss something!
Thanks
Glenn

Can someone Please revert back with a solution to this problem. This is still a recurring problem.

Greatly appreciated

Hi @Richard

ok I found the problem, for some reason on the mobile view – it adds an extra div.av-parallax, so the background image gets attached to this div and not the section. You cannot pick this up on the browser Inspector, need to inspect on a phone. So for anyone having this problem. this is the solution.

Neither codes below worked for me when loading the page on a mobile device, it does work however when resizing chrome and reloading the desktop browser already resized. I did try different browser on the iphone (safari and chrome) and tried other phone type as well, no luck :(

@media only screen and (max-width: 768px) {
#av_section_1 { background-image: none!important; }}

// Remove color section background
function remove_bg(){
?>
<script>
jQuery(window).load(function(){ 
	if (jQuery(window).width() < 768) {
		jQuery("#unique-id").css("background-image", "");    
	} 
});
</script>
<?php
}
add_action('wp_footer', 'remove_bg');

we did, here is it

Hi
i had the same issue – and found half of the problem. when you select “scroll / srcolling” on the attribute drop down menu for the background image (in the color section) then it works fine on iphone display. BUT if you choose fixed or parallax it will be still deeing visible on iphone displays.

check it out,
regards
sue

Hi,

I have tried the following code and it works perfectly when the image is set to parallax.

But it is important for me that the image is set to “fixed”, how must the code below be changed so that it also works with “fixed”?

I have tried anything. Thank you and best regards,

Martin

@media only screen and (max-width: 989px) {
#unique_id .av-parallax .av-parallax-inner {
background-image: none !important;
}
}

Hi there so this code was working for me, it’s still working for couple color sections.
Just added a new one here:

that’s my code:
@media only screen and (max-width: 400px) { div#archi-workshop { background-image: none!important; } }

I want the background not to show exclusively on mobile decides. The previous quick ccs codes are still working, but not this one. Any clue? I did clear all the caches and so on..

Thank you!

Thank

Hi Vinay,

I have tried your code for removing a fixed background image, cleared the browser cache on mobile, but the image is still there. Do you have any other idea?

Best regards,
Emese

Hi Mike,

Of course I adjusted it for the unique ID. I posted the link in the private content area. On this page there is a section with a fixed background image. I want to keep it for laptops and remove it on mobile devices, as it covers the text and it’s unreadable.

Best regards,
Emese

Hi Yigit,

I tried all what you’ve suggested but no results and no CSS errors. I gave temporary access to the following email address for 5 days: (Email address hidden if logged out) . If you could take a look, I would really appreciate it. The login URL is in the private content.

Best regards,
Emese

Hi Mike,

It worked. Thank you very much!

Best regards,
Emese