Digital Pro Adjust The Height of Front Page 1 Hero Image

This tutorial provides the instructions to modify the height of the front page 1 hero image in the Digital Pro child theme by StudioPress.

Demo Video

Shows how to modify the jQuery in the front-page.js file to set the height of the front-page-1 widget background image.

Instructions

There’s 2 steps :

Step 1 : Remove the following jQuery from the digital-pro > lib > front-page.js file located between lines 12 – 22 :

var windowHeight = $( window ).height() - 90;

$( '.front-page-1' ).css({'height': windowHeight +'px'});

$( window ).resize(function(){

var windowHeight = $( window ).height();

$( '.front-page-1' ).css({'height': windowHeight +'px'});

});

Step 2 : Replace the above code with the following :

$( '.front-page-1' ).height(400);

The code in the file should now look like this.

This is what the code modification produces :

From the default which is this :

Uses the jQuery .height() method to set the content height of the front-page-1 div.

Related Tutorials

• Using jQuery To Change Height At Any Screen Width