Different Image On Mobile Orientation Change

The solution in this download folder enables you to remove the default desktop background image and replace it with a different image for mobile screens.

Not only can you change the image on mobiles ( at any screen width ), you can also use 2 different images, 1 image sized specifically for portrait and 1 which is a different size for landscape orientation.

Screenshots from Samsung Galaxy.

In this case, the image for the front page 1 widget background changes at 800px which is around the same time the Genesis Responsive Menu activates.

Demo Video #

Shows the mobile.jpg image replacing the default bg-1.png desktop image behind the front page 1 widget area on mobile screens in Infinity Pro.

Tested using the Infinity Pro child theme by StudioPress however the solution can be used in other Genesis child themes by swapping at the CSS selector and class in the jQuery.

This solution has also been tested using portrait & landscape on Samsung Galaxy.

Code Installation – From Download Folder #

There’s 3 steps :

Step 1 – Upload the mobile.js file to the Infinity Pro themes root directory.

Step 2 – Add the following line of PHP code to line 25 of the Infinity Pro themes front-page.php file.

wp_enqueue_script( 'infinity-mobile-image', get_stylesheet_directory_uri() . '/mobile.js', array( 'jquery' ), '1.0.0' ); 

The file should look like this once the code is added.