Support » Theme: Twenty Sixteen » article footer with date, tags .. from left to the bottom

Viewing 5 replies - 1 through 5 (of 5 total)
  • Tammie Lister


    Hi there, you can edit that using a template file and child theme. In this theme that displays like this.



    Thanky you for your answer. But my question is, how i can do this and which parts in the theme i have to change. Yes i use a child theme.

    I think i found what i have to do. I delete point 14.4 and 14.5 in CSS file.

    You can’t just delete parts of the .css because you are going to lose the changes after update.

    I was looking for exactly the same and since I didn’t find the child theme code to move the meta from the left-sidebar to the bottom (as it is automatically displayed when you lower the width of the browser window below 985 px) I made it myself.

    Bear in mind I am not WP developer so this code might not be ‘by the book’, however – it works. You have to make the child theme folder and put the code in some .css file and then activate the child theme. After that, the meta data will be displayed below the posts, even if the screen width is more than 985 px and the post width will be 100%. The code overrides only the settings when the screen width > 985 px. I’ve commented out the original settings so it can be easily seen what is changed. I didn’t check if the code works when there isn’t the right sidebar. Here’s the code:

    Theme Name: My Twenty Sixteen-Child Theme
    Theme URI:
    Description: Meta below instead on the left even on screens wider than 985 px
    Author: Chupo_cro
    Author URI:
    Template: twentysixteen
    Version: 0.1.0

    @import url(“../twentysixteen/style.css”);

    * 14.4 – >= 985px

    @media screen and (min-width: 61.5625em) {
    body:not(.search-results) article:not(.type-page) .entry-content {
    /*float: right;*/
    float: none;
    /*width: 71.42857144%;*/
    width: 100%;

    body:not(.search-results) article:not(.type-page) .entry-footer {
    /*float: left;*/
    float: none;
    /*margin-top: 0.1538461538em;*/
    margin-top: 2.15385em;
    /*width: 21.42857143%;*/
    width: 100%;

    body:not(.search-results) article:not(.type-page) .entry-footer > span:not(:last-child):after {
    /* insert slash as separator after every but the last span */
    content: “02f”;
    /*display: none;*/
    display: inline-block;

    .single .byline,
    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;*/
    display: inline-block;
    margin-bottom: 0.5384615385em;

    body:not(.search-results) article:not(.type-page) .entry-footer .avatar {
    /*display: block;*/
    display: inline;
    /*height: auto;*/
    height: 21px;
    /*margin: 0 0 0.5384615385em;*/
    margin: -0.1538461538em 0.5384615385em 0 0;
    /*width: 49px;*/
    width: 21px;

    Just wanted to say thanks to the author above – it works!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘article footer with date, tags .. from left to the bottom’ is closed to new replies.