Make WordPress Twenty Sixteen Single Posts Go Full Width

In the WordPress Twenty Sixteen theme when the viewport is over 985px the single posts float to the right of the .entry-footer info which contains the author, gravatar, categories and tags and a link to the comments. They don’t go the full width at that particular size.

twenty-sixteen-full-width-post

When the viewport is lower than 985px the .entry-footer goes below the post content in a inline style.

 

If you want to have this behaviour at any size you need to do some editing to the CSS file style.css

Find and remove….

/* Remove the CSS rules below */
/* line 3512 */
body:not(.search-results) article:not(.type-page) .entry-footer {
float: left;
margin-top: 0.1538461538em;
width: 21.42857143%;
}
/* line 3484 */
body:not(.search-results) article:not(.type-page) .entry-content {
float: right;
width: 71.42857144%;
}

And now they will stack.

twenty-sixteen-full-width-post-stack

 

To style the footer data as all inline at any size, find and remove the CSS below

/* Find and remove the CSS rules below */
.single .byline,
.full-size-link,
body:not(.search-results).group-blog .byline,
body:not(.search-results) .entry-format,
body:not(.search-results) .cat-links,
body:not(.search-results) .tags-links,
body:not(.search-results) article:not(.sticky) .posted-on,
body:not(.search-results) article:not(.type-page) .comments-link,
body:not(.search-results) article:not(.type-page) .entry-footer .edit-link {
display: block;
margin-bottom: 0.5384615385em;
}
body:not(.search-results) article:not(.type-page) .entry-footer .avatar {
display: block;
height: auto;
margin: 0 0 0.5384615385em;
width: 49px;
}
body:not(.search-results) article:not(.type-page) .entry-footer > span:not(:first-child):before {
display: none;
}
view raw inline.css hosted with ❤ by GitHub

Now the footer info will be inline

twenty-sixteen-full-width-post-inline

3 Comments

  1. Kevin on July 8, 2016 at 12:25 am

    Perfect. Just what I needed for the Twenty-Sixteen theme. Blog only.

  2. Steve on March 6, 2016 at 6:54 pm

    Once you remove these lines it does move the .entry-footer on ‘posts’ to bottom – however, now all ‘pages’ have the .entry-footer moved up to this same spot (it was not there before), therefore it is not a practical solution unless you have a blog only site. In general I am not a fan of changing a parent theme – but in this case it would not be possible to not have something by not putting it in a child theme.

  3. a. on February 1, 2016 at 9:12 am

    You mean to remove the CSS rules from style.css of the theme so after update all changes would be lost? The rules have to somehow be disabled in the child theme.

Leave a Comment





%d bloggers like this: