Adjust WordPress Twenty Fourteen Skin Fitting FullHD Screens

Luxing Huang — Sat, 14 Dec 2013 15:40:06 +0000

WordPress 3.8 has a nice look, it also brings a new skin called Twenty Fourteen. (It does look a bit like its back-end managing portal.) Under 1920x1080p or higher resolution, this theme is not optimized, it occupies half left of the screen and some of half right screen, and it look just weird and wasted. Here are a few changes I made for the CSS stylesheet to make it work:

Login with your administrative account into WordPress, go to Appearance -> Editor, select Stylesheet at the page’s bottom.

Changing header width:
This is done in section 3.0

...
.site {
    ...
    max-width: 100%;
}

This is done in section 4.0

...
.site-header {
    ...
    max-width: 100%;   // rather than 1260px
    ...
}

You can also change the content width [optional], you don’t have to change this. It’s my personal adjustment

This is done in section 6.0

...
.page-content {
    ...
    max-width: 600px; // rather than 474px
    ...
}

I didn’t test with 1366×768, not sure how it would look like. And sorry for the 800×600 users.

PS: 1366×768 is evil!
That’s all.

style – Luxing Huang

Adjust WordPress Twenty Fourteen Skin Fitting FullHD Screens