- This topic has 50 replies, 2 voices, and was last updated 4 years, 8 months ago by David.
-
AuthorPosts
-
August 6, 2019 at 11:15 am #977409DavidStaffCustomer Support
Add this CSS to:
.entry-header .entry-meta { display: block; }
August 6, 2019 at 11:30 am #977423Anthonynow theres tags under the title but also at the bottom
August 6, 2019 at 12:24 pm #977466DavidStaffCustomer SupportAdd this filter:
add_filter( 'generate_footer_entry_meta_items', function( $items ) { if ( is_single() ) { $items = array_diff( $items, [ 'tags' ] ); } return $items; } );
August 6, 2019 at 12:41 pm #977477Anthonyit didnt work, it only works if i turn off the snippet that removes the commas (https://gist.github.com/generatepress/18e41e03783b5c7e86402d429e64efc0)
August 6, 2019 at 12:48 pm #977483DavidStaffCustomer SupportOK – 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.
August 6, 2019 at 1:22 pm #977497Anthonyupdated 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 outAugust 7, 2019 at 5:04 am #977922DavidStaffCustomer SupportWe 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; }
August 7, 2019 at 10:52 am #978348Anthonyworked 😀 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?
August 7, 2019 at 12:02 pm #978411DavidStaffCustomer SupportJust to be clear is this on the Posts (blog) page or the Single Post?
August 7, 2019 at 12:07 pm #978416Anthonyoh on the posts page
August 7, 2019 at 3:56 pm #978565DavidStaffCustomer SupportRemoving the CSS here will revert to the title, data, meta stacked in that order
August 7, 2019 at 4:33 pm #978581Anthonyhow do i only have it appear in mobile view?
August 7, 2019 at 5:51 pm #978625DavidStaffCustomer SupportWrap 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.
August 8, 2019 at 6:12 am #978940Anthonyok, 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.
August 8, 2019 at 6:57 am #978967DavidStaffCustomer SupportYou 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.
-
AuthorPosts
- You must be logged in to reply to this topic.