Archived topic
Last updated (on posts) mobile display
5 replies · Started by Alec on October 26, 2019
Hello,
can you please help me with fixing this little thing, when displaying post meta on mobile I have uneven lines:
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" 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
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 :)
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!
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
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 ♫
Thank you! Glad I could help :)
