Shortcode Date

Add this CSS to:

.entry-header .entry-meta {
    display: block;
}

now theres tags under the title but also at the bottom

Add this filter:

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
    if ( is_single() ) {
        $items =  array_diff( $items, [ 'tags' ] );
    }
    return $items;
} );

it didnt work, it only works if i turn off the snippet that removes the commas (https://gist.github.com/generatepress/18e41e03783b5c7e86402d429e64efc0)

OK - use some CSS to hide them instead:

.inside-article > .entry-meta .tags-links {
    display: none;
}

Otherwise we will need to unpick most of what has been done so far.

updated to body:not(.blog).inside-article > .entry-meta .tags-links and it worked. the only problem is that theres little commas i think in between the tags that spacing it out

We can use this CSS to 'hide' the commas:

.single-post .entry-header .tags-links {
    font-size: 0;
}

.single-post .entry-header .tags-links a {
    font-size: 12px;
}

worked :D on mobile view, how do i make it so that the post title and date dont wrap text and also place tags beneath the date?

Just to be clear is this on the Posts (blog) page or the Single Post?

oh on the posts page

Removing the CSS here will revert to the title, data, meta stacked in that order

how do i only have it appear in mobile view?

Wrap that CSS in a media query like so:

@media (min-width: 769px) {
/* CSS styles in here */
}

Then that code will only apply to Desktop size devices.

ok, got it. i also had to remove .separate-containers:not(.single) .entry-header { width: 20%; } to remove the wrapping. i tried adding this code in the media query above but i didnt like how it looked in desktop view because of the spacing with longer titles.

now in mobile view on posts page, move the comments to the right and vertically align it in the middle with the post, is this possible?

on desktop view, if the post title is longer it seems like the tags stick close together with the title, how can i fix this while not increasing the space where the title is shorter?

one more question, can i give tags their own background color? for example if i had a tag labeled 'email' it would have a red background color and then if i had a tag labeled 'twitter' it would be blue, etc.

You can try this to move the comment link:

@media (max-width: 768px) {
    :not(.single) .inside-article {
        position: relative;
    }
    :not(.single) .comments-link {
        position: absolute;
        top: 10px;
        right: 15px;
    }
    /* Stop title from overlapping comment link */
    :not(.single) .entry-title {
        max-width: calc(100% - 110px);
    }
}

You would need to add some margin to the meta like so:

@media (min-width: 769px) {
    :not(.single) footer.entry-meta {
        margin-left: 15px;
    }
}

It needs to be applied to all posts as there is no way to 'test' an element is touching another with CSS.

Unfortunately no easy way to style the meta by tag without custom development at this time.