• 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

Metro Theme Header Image and Responsiveness

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 › Metro Theme Header Image and Responsiveness

This topic is: resolved

Tagged: header image, Logo, Metro child theme, responsive

  • This topic has 3 replies, 2 voices, and was last updated 13 years, 6 months ago by Kimberly.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 29, 2013 at 8:53 am #31926
    Kimberly
    Participant

    Hi there! I am using the Metro theme and I uploaded a header image and it works perfectly on my PC.

    It is positioned perfectly, but the uploader calls for a 1080x87 pixel image which means it doesn't seem to work right on mobile devices because the logo has a bunch of white space on the right to upload properly. My logo is actually 635x87 pixels but when I try to upload that size image, it wants me to crop it proportionally to the 1080x87.

    I know I can use the responsive header plugin to change the size based upon the device, but the 1080x87 sized logo has a bunch of white on the right side so it will never view correctly.

    I'm not sure I am making much sense...

    This is the 1080x87 logo that doesn't require me to crop it. It appears perfectly on the PC but has all that white space on the right.

    http://kimgrabinski.com/wp-content/uploads/2013/03/logo6.jpg

    This is the 635x87 logo that gets cropped in order to be uploaded, and then it will stretch to 1080 wide.

    http://kimgrabinski.com/wp-content/uploads/2013/03/cropped-logo241.jpg

    What I want is it to display like it is using the 1080x87 logo but be able to center when viewed on mobile, like the original Metro demo does.

    Here is the url I am using:

    http://kimgrabinski.com/

    I feel like I am missing something simple but I just can't figure it out.

    Thanks so much!

     


    What’s That Smell?

    March 30, 2013 at 7:24 pm #32166
    Kimberly
    Participant

    I think I figured this out.

     

    In the functions.php I found:

    // Add support for custom header
    add_theme_support( 'genesis-custom-header', array(
    'flex-height' => true,
    'height' => 87,
    'width' => 1080
    ) );

    I ended up changing how I wanted the logo but that seems to be why I was having trouble. I just wanted to share that in case anyone else has similar issues.


    What’s That Smell?

    April 2, 2013 at 9:27 pm #32776
    TheMuscleMentor
    Member

    Maybe I'm a bit confused but what did you change to make a custom header work? I'm having the same issue with the header not appearing on mobile devices correctly.

    April 3, 2013 at 9:47 am #32839
    Kimberly
    Participant

    To get it to appear on mobile devices correctly I used the: "Genesis Responsive Header" plugin.


    What’s That Smell?

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Metro Theme Header Image and Responsiveness’ is closed to new replies.

CTA

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

Create a site with WP EngineShop for Themes

Footer

StudioPress

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