• 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

How to increase size of header area and header image in Genesis Sample?

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 › Design Tips and Tricks › How to increase size of header area and header image in Genesis Sample?

This topic is: not resolved

Tagged: genesis, genesis sample, header, site-header

  • This topic has 3 replies, 3 voices, and was last updated 7 years, 5 months ago by Doug.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 11, 2018 at 9:31 pm #215315
    Doug
    Participant

    Hi

    I’m using the Genesis Sample theme and am wanting to increase the height of the home page header area by scaling it up to 450p, relative to browser window size. Then increase the header image to scale to the space allotted.

    And I’d like this to also scale correctly on mobile.

    Here’s the homepage I’m referring to where you can see how the header area and header image are currently being presented. Also, on mobile, the header area doesn’t scale down to a similar aspect ratio of what’s on the desktop.
    http://homieandlexy.com/

    The header image on that page is 2704?—1083.

    I searched and found an article for another Child Theme, but there are some differences that are throwing me off.

    So I started by increasing the .title-area and .header-image sections, per below. But you can see from the link above I’m not getting good results.

    Below are code changes, so far. Any additional direction would be greatly appreciated.
    Thanks
    Doug

    PREVIOUS
    /* ## Title Area
    --------------------------------------------- */
    .title-area {
    float: left;
    padding: 10px 0;
    width: 300px;
    }
    .header-image .title-area {
    margin: 0 auto;
    max-width: 300px;
    padding: 0;
    }
    .header-full-width .title-area {
    float: none;
    width: 100%;
    }
    NEW
    /* ## Title Area
    --------------------------------------------- */
    .title-area {
    float: left;
    padding: 10px 0;
    width: 1400px;
    }
    .header-image .title-area {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0;
    }
    .header-full-width .title-area {
    float: none;
    width: 100%;
    }
    ----------------//-----------------
    I also changed the following code:
    PREVIOUS
    /* # Site Header
    ---------------------------------------------------------------------------------------------------- */
    .site-header {
    min-height: 160px;
    }
    .site-header > .wrap {
    padding: 20px 0;
    }
    NEW
    /* # Site Header
    ---------------------------------------------------------------------------------------------------- */
    .site-header {
    min-height: 465px;
    }
    .site-header > .wrap {
    padding: 20px 0;
    }

    http://homieandlexy.com/
    January 12, 2018 at 6:11 am #215327
    Victor Font
    Moderator

    The process is the same for any Genesis theme. Did you change the size in functions.php as well? Perhaps this will help: https://victorfont.com/change-logo-size-in-genesis-themes/


    Regards,

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

    January 20, 2018 at 8:04 pm #215569
    simone806
    Member

    Hello,
    I am new to using the Genesis framework. I came to this forum to find out how to correctly reduce the size of the Gallery Pro theme header. I believe this response answers my question as well, but I am not clear on Genesis child theme best practices. Is it recommended to edit the functions.php file directly in Gallery Pro? or should I create a my_functions.php file to add edits?
    Many thanks,
    Simone

    January 25, 2018 at 11:04 am #215729
    Doug
    Participant

    Thanks, Victor. That's a simple to follow article.

    I made the changes per the article, from a previous width/height of 600x160 to 1200x450 in functions.php. And also changed the min header height to 450p in style.css.

    However, I'm still having two problems.
    1. The header image is heavily pixelated, despite being 2704 ?— 1083
    2. On mobile, the header locks at the larger height, and I'd like it to scale for smaller browsers.

    Here's the site page
    http://www.homieandlexy.com

    Can you tell if there's anything I'm missing?
    Thank you
    doug

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ 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

© 2025 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