Remove Custom Background for mobile devices

Community Forums Forums Design Tips and Tricks Remove Custom Background for mobile devices

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Sridhar Katakam 4 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #116391

    ngarrett
    Member
    Post count: 4

    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
    #116394

    Sridhar Katakam
    Participant
    Post count: 1071

    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.


    #116506

    ngarrett
    Member
    Post count: 4

    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

    #116508

    Sridhar Katakam
    Participant
    Post count: 1071

    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() ) );
    }

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

You must be logged in to reply to this topic.