Hi Leah, could you provide a link to your site so I can take a look? Thanks.
Thread Starter
llr19
(@llr19)
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
Thread Starter
llr19
(@llr19)
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!
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. 🙂
Thread Starter
llr19
(@llr19)
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
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.
Thread Starter
llr19
(@llr19)
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
Wonderful, glad to hear that did the trick. 🙂
