We're merging with GenerateBlocks! Learn more here.

[Resolved] Add a line break in meta on mobile

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Add a line break in meta on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #36826
    Michelle
    Participant

    How do I move the author meta beneath the date meta on mobile? It runs too long on mobile, so I want it on two lines.

    • This topic was modified 6 months ago by Michelle.
    #36832
    Fernando
    Participant

    Hi Michelle,

    May you kindly link us to a sample page in your website where you want to apply this change?

    Hope to hear from you soon. 🙂

    #36835
    Michelle
    Participant

    Sure. I’m referring to my home page: https://www.thedailyreach.com/home

    I want the date to be first, then the author. I said in my original post that I wanted author “beneath”, but I think one line is fine.

    Thanks!

    #36837
    Fernando
    Participant

    I see. If you still want it beneath on mobile, here is a CSS you may add in Appearance > Customize > Additional CSS:

    @media (max-width: 768px) {
        /* CSS in here for mobile only */
        .wp-show-posts-entry-meta {
        display:flex;
        flex-direction:column
        }
    
        span.wp-show-posts-separator {
        display:none;
        }
    }

    Otherwise, if you wish to put the author after the date, you can try excluding the author as such: https://share.getcloudapp.com/kpuJ6d57

    Then add this PHP snippet:

    add_filter('wpsp_date_output', function($dateoutput){
    	$holder1 = sprintf(
    				'<span class="wp-show-posts-byline wp-show-posts-meta">
    					<span class="wp-show-posts-author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">
    						<a class="url fn n" href="%1$s" title="%2$s" rel="author" itemprop="url">
    							<span class="author-name" itemprop="name">%3$s</span>
    						</a>
    					</span>
    				</span>',
    				esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
    				esc_attr( sprintf( __( 'View all posts by %s', 'wp-show-posts' ), get_the_author() ) ),
    				esc_html( get_the_author() ) );
    	return $dateoutput . '| by ' . $holder1;
    });

    Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

    Adding it through Code Snippets should work.

    Hope this helps! 🙂

    #36840
    Michelle
    Participant

    Fantastic! Thank you.

    #36842
    Fernando
    Participant

    You’re welcome Michelle! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

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