[Resolved] How can i change my homepage Post list into something like this

Home Forums Support How can i change my homepage Post list into something like this

  • This topic has 9 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1003256
    Shivam

    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

    #1003345
    David
    Staff
    Customer Support

    Hi 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.

    #1003355
    Shivam

    Done please have a look now…

    #1003368
    David
    Staff
    Customer Support

    Can you:
    1. Flush and disable Autoptimize
    2. I updated the CSS here

    #1003388
    Shivam

    yes 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.

    #1003430
    David
    Staff
    Customer Support

    I updated the snippet and the CSS above.

    #1003448
    Shivam

    Hey 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.

    #1003476
    David
    Staff
    Customer Support
    #1003484
    Shivam

    Thanks for your big help david, everything is fixed..

    #1003520
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.