How to set no background picture on mobile - Support | Kriesi.at

Tagged: background picture

Viewing 20 posts - 1 through 20 (of 20 total)

Author

Posts
September 1, 2016 at 7:34 pm #680922

dirtdiggr
Participant

I am using a fixed background in every color section but the background picture makes the site look messed up on mobile phones. I would like to make it so that on mobile there would be no background picture.

I am using the following css but it doesn’t seem to work:

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

Is there a way to set it so that there’s no background picture on mobile?

September 1, 2016 at 8:50 pm #680960
Vinay
Inactive Moderator
Hey dirtdiggr,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
```
@media only screen and (max-width: 767px) {
#splash {
    background-image: none!important;
}}
```
Best regards,
Vinay
September 1, 2016 at 9:03 pm #680969

dirtdiggr
Participant

Thanks Vinay but that doesn’t work. It works when checking on desktop but it doesn’t work if you’re checking on a mobile phone (android).

September 1, 2016 at 10:28 pm #681014
Vinay
Inactive Moderator
Hi,

Please try adding this at the very end of your themes / child themes functions.php file:
```
// Remove color section background
function external_links(){
?>
<script>
jQuery(window).load(function(){ 
	if ($(window).width() < 768) {
		jQuery("#splash").css("background-image", "");    
	} 
});
```
Best regards,
Vinay
September 1, 2016 at 10:33 pm #681020
dirtdiggr
Participant
There’s something wrong with the code?

Parse error: syntax error, unexpected end of file on line 78:

});
- This reply was modified 8 years, 3 months ago by dirtdiggr.
September 3, 2016 at 6:02 am #681529

Rikard
Keymaster

Hi,

Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.

Best regards,
Rikard

September 3, 2016 at 8:25 am #681579

dirtdiggr
Participant

Ok

September 3, 2016 at 9:59 am #681599
Vinay
Inactive Moderator
Hey!

Please review the site now we have modified the code in functions.php
```
// Remove color section background

function custom_excerpt(){
?>
<script>
jQuery(window).load(function(){ 
	if ($(window).width() < 768) {
		jQuery("#splash").css("background-image", "");    
		jQuery("#casts").css("background-image", ""); 
		jQuery("#about").css("background-image", "");    		
	} 
});
</script>
<?php
}
add_action('wp_head', 'custom_excerpt');
```
Best regards,
Vinay
September 3, 2016 at 10:22 am #681601

dirtdiggr
Participant

Thank you but it didn’t get rid of the background picture on mobile.

View post on imgur.com

September 6, 2016 at 4:33 am #682398
Rikard
Keymaster
Hi,

Please try the following in Quick CSS under Enfold–>General Styling:
```
@media only screen and (max-width: 767px) {
#about {
    background-image: none !important;
}
}
```
Regards,
Rikard
- This reply was modified 8 years, 3 months ago by Rikard.
September 6, 2016 at 3:40 pm #682679

dirtdiggr
Participant

Thanks for replying Rikard but that doesn’t work. It works on a desktop browser but on my phone (android) the background is still there.

Your code is does the exact same thing as the one above:

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

September 8, 2016 at 12:06 pm #683636
Vinay
Inactive Moderator
Hi!

We updated the code to
```
// Remove color section background

function remove_bg(){
?>
<script>
jQuery(window).load(function(){ 
	if (jQuery(window).width() < 768) {
		jQuery("#splash").css("background-image", "");    
		jQuery("#casts").css("background-image", ""); 
		jQuery("#about").css("background-image", "");    		
		jQuery("#av_section_4").css("background-image", "");
	} 
});
</script>
<?php
}
add_action('wp_head', 'remove_bg');
```
This code get’s called when the page loads. When the page is loads on mobile device it removes all background images for the #ID’s listed.
It does not work if you re-size the browser.

Let us know if you have any questions.

Cheers!
Vinay
- This reply was modified 8 years, 3 months ago by Vinay.
September 8, 2016 at 12:13 pm #683640
dirtdiggr
Participant
That did not work. It works on desktop but the background picture still shows on mobile.
- This reply was modified 8 years, 3 months ago by dirtdiggr.
September 12, 2016 at 2:16 am #684841

Ismael
Moderator

Hi!

What is the resolution of the device? Or the actual model? Increase the value of the viewport from 768 to 989 or 1024.

Cheers!
Ismael

September 13, 2016 at 1:42 am #685451

dirtdiggr
Participant

Hi Ismael. Vinay’s code works for desktop (in safari and chrome on a macbook) but it does not work on an android (Samsung Galaxy S5 using Chrome).

Try it out on desktop and then try it on a phone. The background is still there on a phone.

September 15, 2016 at 6:13 am #686709
Ismael
Moderator
Hi!

The screen resolution of the device is 1080 x 1920 pixels. We modified the code a bit. Please remove browser cache before testing the page.
```
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
	function gh() {
		var isMobile = '';

		if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement)
		{
			isMobile =  true;
		}
		else
		{
			isMobile =  false;
		}

		if (isMobile || $(window).width() < 1081) {
			$("#splash").css("background-image", "");    
			$("#casts").css("background-image", ""); 
			$("#about").css("background-image", "");    		
			$("#av_section_4").css("background-image", "");
		} 
	}

	gh();
})(jQuery);
</script>
<?php
}
```
Best regards,
Ismael
September 15, 2016 at 2:43 pm #686911

dirtdiggr
Participant

Thanks Ismael but that has the same result. There’s still a background on mobile. Do you have a phone to check? Let me know if you need the login and password again.

September 16, 2016 at 4:54 am #687188

Vinay
Inactive Moderator

Hi,

The code works on my local installation, I will set up a demo for you on your site then we can easily replicate it to the other pages, please give us a bit more time.

Best regards,
Vinay

September 21, 2016 at 7:26 am #689643

dirtdiggr
Participant

Thank you very much Vinay and Ismael for your guys’ help. I tried the code again and for some reason it worked! Thanks again guys.

September 22, 2016 at 7:44 am #690124

Rikard
Keymaster

Hi,

Great, glad you got it working and thanks for the feedback :-)

Please let us know if you should need any further help on the topic.

Regards,
Rikard
Author

Posts

Viewing 20 posts - 1 through 20 (of 20 total)

You must be logged in to reply to this topic.