[Resolved] Last updated (on posts) mobile display

Home Forums Support Last updated (on posts) mobile display

  • This topic has 5 replies, 2 voices, and was last updated 11 months ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1044879
    Alec

    Hello,

    can you please help me with fixing this little thing, when displaying post meta on mobile I have uneven lines:

    https://prnt.sc/poeg3u

    I used this snippet from https://woorkup.com/generatepress-review/:

    if ( ! function_exists( ‘generate_posted_on’ ) ) :
    /**
    * Prints HTML with meta information for the current post-date/time and author.
    */
    function generate_posted_on()
    {
    $date = apply_filters( ‘generate_post_date’, true );
    $author = apply_filters( ‘generate_post_author’, true );
    //if ( get_the_time( ‘U’ ) !== get_the_modified_time( ‘U’ ) )
    $time_string .= ‘<time class=”updated” datetime=”%3$s” itemprop=”dateModified”>%4$s</time>’;
    $time_string = sprintf( $time_string,
    esc_attr( get_the_date( ‘c’ ) ),
    esc_html( get_the_date() ),
    esc_attr( get_the_modified_date( ‘c’ ) ),
    esc_html( get_the_modified_date() )
    );

    // If our date is enabled, show it
    if ( $date ) :
    printf( ‘<span style=”float: left; margin-right: 3px;”>Updated:</span><span class=”posted-on”>%1$s</span>’,
    sprintf( ‘%3$s‘,
    esc_url( get_permalink() ),
    esc_attr( get_the_time() ),
    $time_string
    )
    );
    endif;

    // If our author is enabled, show it
    if ( $author ) :
    printf( ‘ <span class=”byline”>%1$s</span>’,
    sprintf( ‘<span class=”author vcard” itemtype=”http://schema.org/Person&#8221; itemscope=”itemscope” itemprop=”author”>%1$s <span class=”author-name” itemprop=”name”>%4$s</span></span>’,
    __( ‘by’,’generatepress’),
    esc_url( get_author_posts_url( get_the_author_meta( ‘ID’ ) ) ),
    esc_attr( sprintf( __( ‘View all posts by %s’, ‘generatepress’ ), get_the_author() ) ),
    esc_html( get_the_author() )
    )
    );
    endif;

    }
    endif;

    ==========================================
    CSS:

    /*Last updated on posts*/
    .posted-on .updated {
    display: block;
    float:left;
    margin-right: 5px;
    }

    =========================================

    I suppose there is a quick CSS fix for this.

    Thanks in advance,

    Alec

    #1045573
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Instead of that function and CSS, can you try this function?: https://docs.generatepress.com/article/generate_post_date_output/#only-show-updated-date

    Let me know 🙂

    #1045638
    Alec

    I added the first two snippets (‘Only Show Updated Date’ and ‘Add Icon to Date’) and the results are just fine, thank you.

    Just to refine a little,
    1. I need to make a space between the icon and the date and also
    2. to point the author’s name link to a posts page and not to a home page. It is also fine just to remove the link from the author’s name. Here is the screenshot: https://prnt.sc/poo64v

    Thanks for your time, Tom!

    #1046105
    Tom
    Lead Developer
    Lead Developer

    To add a space, try this CSS:

    .posted-on {
        padding-left: 5px;
    }

    To remove the link, try this function: https://docs.generatepress.com/article/generate_post_author_output/#remove-link

    #1046152
    Alec

    Fine, thank you. Actually I needed to add a space on the mobile only, so I did:

    /*Add a space between ‘posted-on’ and a symbol on mobile*/

    @media
    all and (min-width:769px) and (max-width: 800px) {
    .posted-on {
    padding-left: 5px;
    }
    }

    Thank you very much!

    I am glad I choose GPP to switch from my old theme. Love the aesthetics, the build, and the community of good people around the framework. I also learn many useful things as I go.

    My admiration and keep on the good work!

    Alec ♫

    #1046331
    Tom
    Lead Developer
    Lead Developer

    Thank you! Glad I could help 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.