Change Front Page Image Height in Atmosphere Pro

[versefamebeauty]

Is there a way to edit the backstretch.js so that the home page image is only 50% (max 500 pixels) high? I want my widget content to be "above the fold" and didn't realize before purchasing the theme that this wouldn't be a simple stylesheet change.

[Brad Dalton]

Try changing the height value in front-page.js

---

Tutorials for StudioPress Themes.

[versefamebeauty]

I'm going to need to know more jquery to know what my options are here...

jQuery(function( $ ){

// Set front page 1 height
var windowHeight = $( window ).height() - 77;

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

$( window ).resize(function(){

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

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

});

// Local Scroll Speed
$.localScroll({
duration: 750
});

});

[PainterMommy]

I am looking for the answer to this. What do we adjust in the .js for the image height???

[Dave]

I guess I would be the third person trying to find the same answer to the same question.

I know you can find the file to edit in the following dir "wp-content/themes/digital-pro/js/front-page.js" You will have to change the digital-pro to your theme name, at this moment I still have not been able to get the correct answer on how to solve the problem. It seems that anything I try will not change the image height.

---

Please visit me at tsttechnology.com

[thinkmedia]

After much cursing and searching I have put this in my style.css file

.backstretch {height: 650px!important;}
.front-page-1 {height: 650px!important;}

It's a hack but it seems to work so far.

I've read the documentation from the developer and while it indicates simply changing the details in backstretch.js that doesn't work either.

{left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},s={position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999},q=function(c,b,e)

Changing the front-page.js file should do it but the only value in this file is -77 and changing it didn't make a difference.

// Set front page 1 height
	var windowHeight = $( window ).height() - 77;

So unless there is a weird combination of multiple files, I am resorting to the CSS hack.

It's too bad StudioPress hasn't posted an easier solution to this problem that way too many people are having, and continue to ask about changing.

UPDATE: Grrrrr - using a fixed value works buuuuut it isn't height responsive. Width is responsive still. If you use a percentage, it doesn't scale (responsive) at all. I'll keep trying.

[thinkmedia]

Use max-height instead

.backstretch {max-height: 650px!important;}
.front-page-1 {max-height: 650px!important;}

[barryhill]

Hi

I have tried this, it works on a desktop, but on mobile it doesn't scale and leaves a large gap under the picture?

Ideas for a way around this?

Barry

[Author]

Posts