Maximum width of header and footer

  • kanzleikolossa · Member ·

    Hi there,
    i want my header- and footer image prevent from becoming too wide. I think a maximum width of 1920px is fine.

    Currently i changed my css to:
    #page-header.cover{
    max-width: 1920px;
    }

    #tertiary.widget-area{
    max-width: 1920px;
    }

    It works, but the sections are not centered. Is there any way to set a maximum width of header and footer and center these sections without writing a plugin?

    Best regards,
    Jeannette

    The blog I need help with is: (visible only to logged in users)

  • mkrdip · Theme Author ·

    Hi Jeannette,

    Currently, your site is private. Would you mind to make it hidden, please? So I can see and provide a fix.

    Thank you.

  • kanzleikolossa · Member ·

    Hi, i deactivated Under Construction Page. You should be able to see the website now.

  • mkrdip · Theme Author ·

    Hi Jeannette,

    Thanks for making the change.

    I can see everything is fine as expected to compare our demo. Would you mind to show me a screenshot of what do you want from your site, please? You can use any image sharing site and paste the link here.

    Cheers.

  • kanzleikolossa · Member ·

    Hi mkrdip,
    our screens are pretty wide (2560×1080). I don’t like the big images at this resolution. I hope the screenshots help you to understand my problem. Sorry, when asking my question i didn’t think about that you possibly don’t have such wide displays ;)

    Here’s the link to the screenshots.

  • mkrdip · Theme Author ·

    Hi Jeannette,

    Thanks for the screenshot. I understand the issue you are facing, extremely sorry for that and thanks for bringing this out. Would you mind to do two things again, please?

    – Make the site private again for few hours?
    – Are you able to see the same issue on our demo site?

    Please let me know.

    Thanks again.

  • kanzleikolossa · Member ·

    Hi mkrdip,
    i uploaded screenshots of your template. It’s “normal”, but i don’t want our images to become so large. I feel then like being hit ;)
    I already added the css code on top to our site to resize header and footer, but cannot find a way for them to be centered.

    Best regards, Jeannette

  • mkrdip · Theme Author ·

    Hi Jeannette,

    Glad that our demo is fine on your screen. Means it’s an issue with your website only. Please give me few more hours to find a solution for you when I go to a place where I have access to wide screens to resolve your issue.

    Cheers.

  • kanzleikolossa · Member ·

    Hi mkrdip, did you find a solution how to center the header- footer images with maximum width?

  • mkrdip · Theme Author ·

    Hi there,

    Sorry for late response, I took time to analyze it.

    The following codes are causing this issue for bigger screens:

    #page-header{
	max-width: 1920px;
	margin: 0 auto;
}

#tertiary.widget-area{
	max-width: 1920px;
}

    It’s restricting the page header and widgets to a size and showing them left on bigger screens.

  • kanzleikolossa · Member ·

    Yes, it’s my intent to restrict the size. Because on larger screens the images become too big (for my taste) and are cropped terribly.
    The question was if there is a way to display them centered (not bound left, without implementing a plugin).

    Best regards, Jeannette

  • mkrdip · Theme Author ·

    Hi Jeannette,

    Centering or technically to say margin: 0 auto; doesn’t work if you restrict size like this. No plugin can help on this too. The best trick for this is, remove the CSS as I advised above and then please ask me on how to assign different hero/header images (different sizes) for different screen sizes.

    I can provide CSS codes to target any screen size, mobile, tablet, desktop, bigger desktop etc. :)

    Hope this helps.

    Let me know.

  • The topic ‘Maximum width of header and footer’ is closed to new replies.