Image Section Height Changes In Altitude Pro Front Page

A member asked me today how to change the height of the background images in the Altitude Pro themes front page widgets.

Here’s the question from a member :

I am wondering if it is possible to change the height dimension on some of the background images ( not all) I tried to just make my image shorter but then it tiles. I am using some of the background image areas with a text widget on them and only have 1 or 2 sentences of type in come cases, so it would be nice if I could shorten these image areas up so there is not as much dead space. I tried doing this by setting the height of the front- page widget box I wanted to be shorter with css but that did not really work as I hoped, but it could be the css I used.

Here’s the home.js file from the Altitude Pro theme which has been modified so the image height is changed.

The changes in the above jQuery have been made on lines 44 & 50.

Both lines have been changed from this :

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

To this which adds a multiplication operator (*) :

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

You can also use JavaScript Arithmetic Operators like plus + and minus – like this :

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

or

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

Specific Sections

You can also change the height for specific background image sections like this :

Modify CSS for Margin & Padding

You can reduce the height of each image section further by modifying the default CSS for padding in the following CSS rule :

.front-page-1 .image-section {
    padding-top: 75px;
}

The 60px padding in the following CSS rule :

.flexible-widgets {
    padding-bottom: 60px;
    padding-top: 100px;
}

And the 54px margin in the following CSS rule :

.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
	border-top: 54px solid transparent;
	margin-top: -54px;
	-webkit-background-clip: padding-box;
	-moz-background-clip:    padding;
	background-clip:         padding-box;
	position: relative;
	z-index: 9;
}

You’ll also find CSS which effects the height of the image sections in the CSS for media queries.

Related Tutorials

• Using jQuery To Change Height At Any Screen Width