• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Atmosphere Pro change frontpage image size

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Atmosphere Pro change frontpage image size

This topic is: not resolved

Tagged: Atmosphere Pro, height, widget

  • This topic has 8 replies, 7 voices, and was last updated 5 years, 6 months ago by Glade.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 15, 2015 at 5:55 pm #171224
    shontam
    Member

    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!

    November 17, 2015 at 9:06 am #171335
    Victor Font
    Moderator

    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?

    November 25, 2015 at 6:13 am #171980
    Cesare Gilento
    Participant

    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;
    December 1, 2015 at 10:16 pm #172404
    shontam
    Member

    Thank you so much c.gilento.

    December 16, 2015 at 3:05 pm #173970
    RedTree
    Member

    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
    });

    });

    October 4, 2016 at 1:12 pm #194226
    fotodog13
    Participant

    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?

    November 29, 2016 at 4:11 am #196761
    Cesare Gilento
    Participant

    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;

    November 29, 2016 at 5:40 am #196766
    indiangoogle
    Member

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


    You can Watch Our Indian God Radha Krishna and Lord Ganesha

    September 16, 2017 at 6:12 pm #211575
    Glade
    Member

    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
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble