- This topic has 9 replies, 2 voices, and was last updated 4 years, 7 months ago by David.
-
AuthorPosts
-
September 7, 2019 at 7:40 am #1003256Shivam
Hey team, please check my homepage here
I want to make the list of posts something like this website
Special note – Please check the mobile version of that site too. I want the exact same look how it comes on desktop and mobile just like that website..
Thanks in advance
September 7, 2019 at 7:50 am #1003345DavidStaffCustomer SupportHi there,
first off add this PHP snippet to move the meta below the excerpt:
add_filter( 'generate_header_entry_meta_items', function( $items ) { if ( is_home() || is_archive() ) { $items = array( '', ); } return $items; } ); add_filter( 'generate_footer_entry_meta_items', function( $items ) { if ( is_home() || is_archive() ) { $items = array( 'author', 'date', ); } return $items; } );
With this CSS to style it:
body:not(.single) footer.entry-meta .author { font-size: 0; } body:not(.single) footer.entry-meta .author a, body:not(.single) footer.entry-meta .posted-on { font-size: 12px; } body:not(.single) footer.entry-meta .author a:after { content: '•'; margin-left: 5px; } body:not(.single) footer.entry-meta span { display: inline; } .blog footer.entry-meta, .archive footer.entry-meta { display: block !important; margin-top: 0.25em; } .entry-summary { margin-top: 0.25em; } body:not(.single) article:not(:first-child) .inside-article { padding-top: 5px; } body:not(.single) .post .inside-article { padding-bottom: 5px; } @media (max-width: 768px) { body:not(.post-image-aligned-center) .inside-article .post-image { margin-right: 1em; margin-bottom: 1em; float: left; text-align: left; } .post-image-aligned-left .post-image img { max-width: 100px; } .entry-summary { display: none; } .blog header.entry-meta, .archive header.entry-meta { display: none; } .blog footer.entry-meta, .archive footer.entry-meta { line-height: 1; } .blog .entry-title, .archive .entry-title, .search .entry-title { font-size: 16px; } }
Once thats done let me know so i can take a look at the layout.
September 7, 2019 at 8:07 am #1003355ShivamDone please have a look now…
September 7, 2019 at 8:20 am #1003368DavidStaffCustomer SupportCan you:
1. Flush and disable Autoptimize
2. I updated the CSS hereSeptember 7, 2019 at 8:51 am #1003388Shivamyes it worked but is not same on mobile device… Please check the mobile device look on both sites..
And one more thing author name and date bth have different font size as well as there is too match gap between each post…
As well as when i added the PHP code there is a code appearing athe bottom of single article – click here to check screenshot and i am 100% sure this is coming bcz of the code because when i remove the code it disappear.
September 7, 2019 at 9:39 am #1003430DavidStaffCustomer SupportI updated the snippet and the CSS above.
September 7, 2019 at 9:58 am #1003448ShivamHey David it worked nicely, but for mobile device how can i change the font size, i am using this code for which is applying for all devices including desktop and mobile.
.blog .entry-title, .archive .entry-title, .search .entry-title { font-size: 18px; Font-weight:550; }
So is there any way to reduce the font size of title on mobile as well as any way to reduce the gap between title and meta info in mboile devices.
September 7, 2019 at 10:42 am #1003476DavidStaffCustomer SupportCSS updated.
September 7, 2019 at 10:51 am #1003484ShivamThanks for your big help david, everything is fixed..
September 7, 2019 at 11:09 am #1003520DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.