Remove Custom Background for mobile devices

[ngarrett]

I'm using the winning agent child theme-I know there is a forum just for this theme but I was having troubles logging in for whatever reason so I was unable to post their.

I have a full width custom background and was wondering if someone could help with the css coding to remove the background when visitor is using a mobile device (like: @media only screen and (max-device-width : 640px)).

Using the firebug inspector tool I was unsuccessful trying this on my own.

My goal is to speed up the website when visitors are viewing listings-which is enough to load on it's own.

Hopefully this will help cut back on the load time. Any suggestions?!?!?

Thanks

http://garrettsrealty.com

[Sridhar Katakam]

I see that your site/theme uses Backstretch for the full screen background image. You can install a plugin like mobble, find the code where backstretch is being enqueued and wrap it in an if conditional, ! is_handheld() so that it works only on non handheld devices.

---

Genesis Tutorials | Follow me on Twitter

[ngarrett]

Thank you Sridhar for replying, I think I found what you are speaking of below. But I am a little confused on how I wrap it in an if conditional for non handheld devices.

`// Enqueue Backstretch scripts only if custom background is being used
if ( get_background_image() ) {

wp_enqueue_script( 'wap-backstretch', get_stylesheet_directory_uri() . '/lib/js/backstretch.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'wap-backstretch-set', get_stylesheet_directory_uri() .'/lib/js/backstretch-set.js' , array( 'jquery', 'wap-backstretch' ), '1.0.0' );
wp_localize_script( 'wap-backstretch-set', 'BackStretchImg', array( 'src' => get_background_image() ) );
`

Would I edit it directly in the child themes functions.php or in the css.stylesheet

Thanks

[Sridhar Katakam]

Try this:

After activating Mobble, take a backup of the child theme's functions.php and directly change the above code in it to:

// Enqueue Backstretch scripts only if custom background is being used and for non handheld devices (mobiles, tablets etc.)
if ( get_background_image() && ! is_handheld() ) {

	wp_enqueue_script( 'wap-backstretch', get_stylesheet_directory_uri() . '/lib/js/backstretch.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_script( 'wap-backstretch-set', get_stylesheet_directory_uri() .'/lib/js/backstretch-set.js' , array( 'jquery', 'wap-backstretch' ), '1.0.0' );
	wp_localize_script( 'wap-backstretch-set', 'BackStretchImg', array( 'src' => get_background_image() ) );
}

---

Genesis Tutorials | Follow me on Twitter

[Author]

Posts