Customize mobile featured image, title and meta data archives

Hi there,

you can try this CSS:

@media (max-width: 768px) {
    .post-image-aligned-left .post .inside-article .post-image {
        margin-top: 0;
        margin-right: 1em;
        float: left;
        text-align: left;
    }

    .post-image-aligned-left .post .inside-article .post-image img {
        width: 100px;
        height: 100px;
        object-fit: cover;
    }
    /* Adjust meta sizes */
    .post-image-aligned-left .post .inside-article .entry-meta {
        font-size: 12px;
        margin-bottom: 0.25em;
    }
    /* remove excerpt space */
    .entry-summary {
        margin: 0;
    }
}

You may need to adjust the Archive Content Title size for mobile - and the Post meta.... let us know

Hi David,

That seems to work for images and titles, but don't know how to change the meta sizes in mobile.

Thanks.

Edit the above code to include the Meta

That works. But there's a lo of space between date/author and categories/comments as you can see in the link: https://prnt.sc/sxv4c4

Is it possible to?

1. Reduce the space
2. Transform to uppercase the category
3. Put on the same line category and comments

Thanks!

Edit: as you can see in the home page I have the author, date and comments above title, I will like to do something like that in archives.

Edit: here goes the screen capture: https://prnt.sc/sxvctt

This PHP Snippet to arrange the archive meta:

add_filter( 'generate_header_entry_meta_items', function( $items ) {
	if ( !is_single() ) {
		$items = array(
			'author',
			'date',
			'comments-link',     
		);
	}
	return $items;
} );

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
	if ( !is_single() ) {
		$items = array(
			'categories',       
		);
	}
	return $items;
} );

And this CSS to move it above the title and add the pipe dividers:

body:not(.single) .entry-header {
    display: flex;
    flex-direction: column-reverse;
}

body:not(.single) .entry-header .entry-meta span:not(:last-child):after {
    content: '|';
    margin: 0 5px;
}

Mmmm, almost done, but:

1. For some reason author and | is duplicated as you can see in the capture
2. The top-margin is too big in the entry data

capture: https://prnt.sc/sxxivb

Are you using any other Filters to change the author ?

I have this from years ago:

In child functions:

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

add_filter('pre_get_posts', 'excludeCat');
function excludeCat($query) {
      if ( $query->is_home ) {
            $query->set('cat', '-3936');
      }
      return $query;
}

In a custom plugin with Pluginception:

add_filter( 'generate_post_author_output','tu_customize_author_link' );
	function tu_customize_author_link( $output ) {
	    $twitter = get_the_author_meta('twitter');
	    $author = get_the_author();
	    
	    $author_url = get_author_posts_url( get_the_author_meta( 'ID' ));
	    
	    
	    if (!is_page_template('index-editorial.php')) {
		    
		     echo ' | ' . $hour .' &nbsp;<a class="url fn n" href="'. $author_url .'" rel="author" itemprop="url"><span class="author-name" itemprop="name">'  . $author . '</span></a>' ;
		    
	    } else {
		    
		     echo ' |  <span>Por</span> <a class="url fn n" href="'. $author_url .'" rel="author" itemprop="url"><span class="author-name" itemprop="name">'  . $author . '</span></a>' ;
		    
	    }
	    
	    
	    if ( !empty ($twitter) && is_single()) {
	
	    echo ' &nbsp;&nbsp;<i id="fa-placeholder" class="fa fa fa-twitter" aria-hidden="true" style="font-size: 17px;"></i> 
	    <a target="_blank" href="https://www.twitter.com/'. $twitter .'"><span class="entry-meta">@' . $twitter . '</span></a>';
	    
	    }
	}
?>

I edited the PHP function here

Near the goal:

1. | is in a weird place
2. Top-margin is not fixed to the featured image

capture: https://prnt.sc/sxy0bt

Any chance this issue can be seen on the live site somewhere?

Thanks :)

Hi Leo,

I have uploaded the functions and css right now, the site is live and you can check it out.

Don't think I'm seeing the issue:
https://www.screencast.com/t/ri4yjvGKcg0