Updated Theme (Widening TwentyForteen)

Finally I decided to update theme of my site.   New theme is twentyfourteen,  with very few custom css styling in child theme.

As a key benefit of new theme I see its responsive design,  which it looks well also on mobile devices.  Key mine customizations are:

  • Customized logo
  • Extended max-width of content –   twentyfourteen has width of content some 440px,   which leaves much unused space on normal screens,  I extend it to double size.

To extend width of twenty fourteen I made following changes in child theme:


 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       Ivan
 Author URI:   http://zderadicka.eu
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child

@import url("../twentyfourteen/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

/* Extending max-width */
.site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
    max-width: 884px;

.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
	max-width: 884px;

/* compensation of extending width of content */
@media screen and (min-width: 810px) {
	.attachment .entry-attachment .attachment {
		margin-right: 1px;
		margin-left: 0px;
		max-width: 810px;

	.attachment .site-content .attachment img {
		display: block;
		margin: 0 auto;

	.contributor-avatar {
		margin-left: 0px;

	.contributor-summary {
		float: left;

	.full-width .site-content blockquote.alignleft,
	.full-width .site-content blockquote.alignright {
		width: -webkit-calc(50% + 130px);
		width:         calc(50% + 130px);

	.full-width .site-content blockquote.alignleft,
	.full-width .site-content img.size-full.alignleft,
	.full-width .site-content img.size-large.alignleft,
	.full-width .site-content img.size-medium.alignleft,
	.full-width .site-content .wp-caption.alignleft {
		margin-left: 0px;

	.full-width .site-content .alignleft {
		clear: left;

	.full-width .site-content blockquote.alignright,
	.full-width .site-content img.size-full.alignright,
	.full-width .site-content img.size-large.alignright,
	.full-width .site-content img.size-medium.alignright,
	.full-width .site-content .wp-caption.alignright {
		margin-right: 0px;

	.full-width .site-content .alignright {
		clear: right;


@import url("../twentyfourteen/css/editor-style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

html .mceContentBody,
.wp-caption {
max-width: 884px;

probably also css/ie.css should be modified,  but I do not care for older IE versions.

functions.php (this is necessary to enable larger videos)

if ( ! isset( $content_width ) ) {
	$content_width = 884;



Leave a Reply

Your email address will not be published. Required fields are marked *