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.
Was This Tutorial Helpful?