Twenty Fourteen – Left side / widescreen – appearance

renevanoosten · Member · Apr 9, 2014 at 8:28 am
Copy link

Add topic to favorites
Hello, I just thought to change my site’s theme from Mystique to Twenty Fourteen theme.
Now I am lucky to have a widescreen laptop 3200 x 1800 pixels, and the theme appears to be on the left side of my screen and not in the middle like many other theme’s do. Is it not a standard today 2014, to let all layouts and content to appear from the middle of the screen? I hope anybody can help to have the theme appearance starting from the middle or even make it widescreen based. Thanks for all support !

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Apr 17, 2014 at 4:34 pm
Copy link
Twenty Fourteen doesn’t have a built in option to center the main content area, but you could make a customization like that using custom CSS if you purchased the Custom Design upgrade.

You can try it out before purchasing:
http://en.support.wordpress.com/custom-design/#preview-custom-design-before-purchase

Here is CSS example you can try out. Add it to your Appearance > Customize > CSS editor once you’ve turned on trial mode.
```
#page {
	margin: 0 auto;
}
body.custom-background {
	background-repeat: repeat;
}
```
renevanoosten · Member · Apr 18, 2014 at 10:32 am
Copy link
Thanks for the great tip !
The CSS makes the theme show up in the middle.
Can you also help me with a CSS that makes the theme wider?
Images and YouTube’s are presented in a square box.
I would like to show them up in a 800 x 500 pixel size format or similar :-)
(I hope you understand what I am trying to explain)
Thanks anyway!
designsimply · Member · Apr 18, 2014 at 5:01 pm
Copy link
To do that, you would have to either stretch out or repeat the header image. Note that stretching a header image with CSS could result in some quality loss. You should try it out and see if the example looks good to you. Note: I’m working from a smaller screen than you, so the following example is my best guess at updating the full-width and there could be a few additional things you need to adjust that I might not have been able to spot.
```
.site,
.site-header {
	max-width: 1460px;
}
#site-header [rel="home"] img {
	width: 100%;
	height: auto;
}
```
Adjust the px value as needed.

No items found.