WordPress.org

Ready to get started?Download WordPress

Forums

Superhero
Header/Footer width (9 posts)

  1. llr19
    Member
    Posted 9 months ago #

    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

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

  3. llr19
    Member
    Posted 9 months ago #

    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

  4. llr19
    Member
    Posted 9 months ago #

    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!

  5. 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. :-)

  6. llr19
    Member
    Posted 9 months ago #

    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

  7. 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.

  8. llr19
    Member
    Posted 9 months ago #

    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

  9. Wonderful, glad to hear that did the trick. :-)

Reply

You must log in to post.

About this Theme

About this Topic

Tags