Metro-Pro Header Responsiveness

Community Forums Forums Design Tips and Tricks Metro-Pro Header Responsiveness

This topic is: not resolved

This topic contains 7 replies, has 4 voices, and was last updated by  jenniferh 1 year ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #68195

    Besearched
    Participant
    Post count: 9

    We’ve been working on another site and trying to get the header to be responsive on mobile…and it’s not working out at all. We thought this theme (Metro-Pro) was supposed to be mobile responsive. When the header loads on a mobile device, the entire center section of the header becomes non-existant …. OR …. the header image that was placed there via the dashboard option to use a header image gets reduced to an incredibly small size. Please look at the url provided and advise.

    http://besearched.biz/abbamovers/
    #68256

    emasai
    Participant
    Post count: 790

    You will need to split your header image into 2 different parts for the mobile responsive so that it does not get squished very small.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    #68272

    Besearched
    Participant
    Post count: 9

    Ok, that sounds like a reasonable solution. However, that is something I’ve never had to try to do before. Do I bypass the dashboard Appearance panel for the header altogether? I have to assume this is done through the CSS, can you please provide a little more of a clue?

    Thank you!

    #68281

    emasai
    Participant
    Post count: 790

    I always bypass the Appearance panel and do it directly in the css, more control that way. You can make 2 separate images for the header area, one of them will be in the title area, the other can be a background image in the header or use a second text widget in the header. You will have to adjust the width of the title area which is too large at the moment.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    #68329

    John
    Participant
    Post count: 157
    #78851

    jenniferh
    Member
    Post count: 2

    Hi John,

    http://www.darringforjudge.com/

    I used your tutorial on replacing the background header image with a real image logo and it’s working responsively very well (thank you very much)! Although, the header at full screen view is much smaller than it should be (should be 1080 px, full width).

    It seems to be conflicting with the #header .widget-area where we have the “contribute” button. I tried adjusting the width of that class to be able to enlarge the header some, but it’s connected to the sidebar which I don’t want to modify.

    Any suggestions on how to retain my full width header, and the header widget image, and the responsiveness!?

    Much appreciated,
    Jennifer

    #78856

    John
    Participant
    Post count: 157

    Hi Jennifer,

    After taking a quick look at your site I think the approach I would take is to separate “Anne B. Darring” and the two large green stars from the rest of the header image and make that the logo. Then set her photo and the tagline as the background image of the header. That should allow you to also have the contribute button in the header.

    You’d have to adjust the CSS at your different media breakpoints so that the three elements would play well together, but that’s what I would do.

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #78862

    jenniferh
    Member
    Post count: 2

    Ah, I see what you mean. I’ll give that a try, thanks!

    Jennifer

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

You must be logged in to reply to this topic.