Metro Theme Header Image and Responsiveness

Community Forums Forums Design Tips and Tricks Metro Theme Header Image and Responsiveness

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Kimberly 2 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #31926


    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 1080×87 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 635×87 pixels but when I try to upload that size image, it wants me to crop it proportionally to the 1080×87.

    I know I can use the responsive header plugin to change the size based upon the device, but the 1080×87 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 1080×87 logo that doesn’t require me to crop it. It appears perfectly on the PC but has all that white space on the right.

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

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

    Here is the url I am using:

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

    Thanks so much!




    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.



    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.



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

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Metro Theme Header Image and Responsiveness’ is closed to new replies.