Atmosphere Pro change frontpage image size

[shontam]

Hello!

I am using the Atmosphere Pro theme.

How can I change the height of the widget area on the front page named "Front Page 1".

Currently the area displays a very large height with an image. I have tried to swap out the image or remove it completely but this does not affect the height of this widget area.

I have tried to manipulate the CSS to no avail.

I have tried searching the PHP files for this height which my inspector says is 399px but no luck.

Thank you for your help!

[Victor Font]

Look in style-front.css and adjust the padding.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Cesare Gilento]

Hi shontam,

the Front Page Image is a backstretch image and it's height is set in js\front-page.js

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

You can edit line 4 as follows:

	// Set front page 1 height
	var windowHeight = 300;

[shontam]

Thank you so much c.gilento.

[RedTree]

Do you keep the remainder of this file? I have the below in the front-page.js file, but the front page 1 image reverts back to full height when browser size is changed.

jQuery(function( $ ){

// Set front page 1 height
var windowHeight = 300;

$( '.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
});

});

[fotodog13]

I am looking for the answer to this as well- I made the change to line 4 but when you change the browser window size it reverts back to the tall image.
How do you prevent that and have the image display correctly on other size devices?

[Cesare Gilento]

I'm sorry, i forgot to check "Notify me follow-up replies via email" so I missed your replies.

You just have to edit line 10 as line 4

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

After
var windowHeight = 300;

[indiangoogle]

you can try to change the style.css which avilable in theme section

---

You can Watch Our Indian God Radha Krishna and Lord Ganesha

[Glade]

Just to add to this in case anyone is wondering, you can also change it to the following and it will auto adjust the size.

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

Play with the -400 number until you achieve the height you want.

This is in the font-page.js file.

[Author]

Posts