Centering theme structure with CSS

Alison
(@anonymical7)

9 years, 5 months ago

Hi All css wizards,

I am *so* close to figuring this out and need just a bit of final CSS guidance. I am trying to get the header, menu structure and content to all move over further to the right to appear more centered. Here is the link to the site: Site

Is it just a question of increasing the left margin more? If so, which margin in the code?

Help would be much appreciated.

A

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

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

9 years, 5 months ago

What browser size are you viewing your site on? It looks centred to me on a large desktop size (1900+ px wide)

nocturnae
(@nocturnae)

9 years, 5 months ago

Hi,

I just checked with a screenshot in photoshop (on 1920x resolution) and the text (at least on the homepage) is dead center (580px on each side). Looks allright to me!

Kind regards,

jnixon
(@jnixon)

9 years, 5 months ago

You could put text-align: center; on your ul.nav-menu class.

Thread Starter Alison
(@anonymical7)

9 years, 5 months ago

Thanks for the quick responses!..Im using Chrome,let me figure out a screenshot and I will show what I mean. Maybe I can explain better.
ThemeSumo
(@themesumo)

9 years, 5 months ago
Add this to your Custom CSS or Child Theme style.css file:
```
.main-navigation ul.nav-menu {
    margin-left: 0;
    text-align: center;
}
```
Your logo is an image, the text in your image isn’t centralized, you’ll need to modify your logo image to centralize that element, everything else appears centralized from what I can see.
- This reply was modified 9 years, 5 months ago by ThemeSumo.
Thread Starter Alison
(@anonymical7)

9 years, 5 months ago

Heres a screenshot. What essentially I cannot figure out to do is move the header, menu and body text between the two faces.

Screenshot

https://www.dropbox.com/home/Public?preview=Screen+Shot+2016-11-03+at+12.35.04.png

Thread Starter Alison
(@anonymical7)

9 years, 5 months ago

Hi Themesumo! I will try this and report back!
Thanks!
ThemeSumo
(@themesumo)

9 years, 5 months ago
I can’t view anything from your link, it doesn’t exist.

I can see what you mean with the two faces, but you shouldn’t be centralizing your website based off an image, it should be centralized to the device/screen-width it’s being viewed on, which most of your site now is.

As I mentioned before, the contents of your header image isn’t centralized, open up Photoshop and use the tools to find the central point of your image, and if you add the code I gave you before your menu will also become centralized. Your contents already are centralized, I recall helping you a while ago with this.

You should then adjust your background image to suit your contents, not the other way around.

Hope this helps.
- This reply was modified 9 years, 5 months ago by ThemeSumo.