[Resolved] Last updated (on posts) mobile display

[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

[Tom]

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 🙂

[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!

[Tom]

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

[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 ♫

[Tom]

Thank you! Glad I could help 🙂

[Author]

Posts