Support » Theme: Superhero » Header/Footer width

  • Hello!

    I am trying to get my header and footer to be the same width (960px) as the body content.

    Whenever I go to the stylesheet and change this width to 960px (instead of 100%), it jumps to the left side of the screen:
    #masthead-wrap {
    background-color: #318ce7;
    -webkit-box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25);
    box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25);
    position: absolute;
    top: 0;
    z-index: 1000;
    width: 100%;
    }

    I can’t figure out how to get them centered on the page.

    If anyone could help, I’d appreciate it!
    -Leah

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Hi Leah, could you provide a link to your site so I can take a look? Thanks.

    Hi Kathryn,

    Unfortunately, the site is only on our server and not live yet. I took a screenshot of the site, if that helps at all.

    Thanks,
    Leah

    It will probably be on a staging site in a couple of weeks. I assume you need to see the code. I’ll post the site whenever we have it running.

    Thanks a lot!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Hi there, thanks for the screenshot. You may need to apply a width to your body – or edit your child theme files to add a wrapper class instead – to get this working. I added this code to some custom CSS and it centered the header and footer and reduced them both to 960px. You may also need to add some padding as needed:

    body {
    	width: 960px;
    	margin: 0 auto;
    }
    
    #masthead-wrap {
    	width: 960px;
    	margin-left: auto;
    	margin-right: auto;
    }

    If you have any questions about this – or about child themes, custom CSS, or wrapper classes – just let me know. 🙂

    That’s what I had originally tried, but for some reason, the header jumps to the left (see photo). I tried adding padding, but the location of the header still changes based on how big one’s browser is.

    This has been puzzling me all week!

    Best,
    Leah

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Are you sure you also included this bit in your code?

    body {
    	width: 960px;
    	margin: 0 auto;
    }

    Without this CSS, my test-site header does jump to the left, but with it, the header and footer both center.

    It’s possible that some of your other custom code is affecting this, so I may need to take a look directly once your site is on a staging server to be able to help further.

    Hi Kathryn,

    It worked like a charm!! I had neglected to add the body CSS (oops).

    Thank you so much! I really appreciate it.

    Best,
    Leah

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Wonderful, glad to hear that did the trick. 🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header/Footer width’ is closed to new replies.