[Support request] i want my blog post to look different on mobile

Home Forums Support [Support request] i want my blog post to look different on mobile

Home Forums Support i want my blog post to look different on mobile

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #628228
    Chetan

    i want my blog post archive post to look different on mobile how can i do it??

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #628229
    David
    Staff
    Customer Support

    Hi there,

    how different do you want it to look? Do you have an example site or image that you would match to?

    #628230
    Chetan
    #628265
    David
    Staff
    Customer Support

    OK, so this is going to take some Customiser setup, a bit of PHP and some CSS if you’re up for it, if we can work through each step with you making changes to the site so i can check in:

    To start with Customiser > layout > blog > Featured images – archive:
    Set Location above title and alignment left. leave sizes as auto.

    Then we need to create a wrap around the Title and Summary. We need to add this snippet:

    function content_wrap_open() {
        if ( ! is_singular() ) {
            echo '<div class="content-wrap"><!---Open content wrap---->';
        }
    }
    add_action( 'generate_before_content', 'content_wrap_open' , 100 );
    
    function content_wrap_close() {
        if ( ! is_singular() ) {
            echo '</div><!---Close content wrap--->';
        }
    }
    add_action( 'generate_after_content', 'content_wrap_close' );

    https://docs.generatepress.com/article/adding-php/

    If you’re not using a child theme then i would advise the Code Snippets plugin mentioned in the article.

    Then add this CSS:

    @media (min-width: 768px) {
        .archive .inside-article, .blog .inside-article, .search-results .inside-article {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding-right: 40px;
            padding: 0;
        }
        .archive .post-image a img, .blog .post-image a img, .search-results .post-image a img  {
            display: block;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }
    }
    
    @media (max-width: 768px) {
        .archive .content-area, .blog .content-area, .search-results .content-area {
            padding: 12px;
        }
        .archive .inside-article, .blog .inside-article {
            padding: 0;
        }
    }
    
    .archive .post-image, .blog .post-image, .search-results .post-image {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 35%;
        flex: 1 0 35%;
        margin-bottom: 0 !important;
        margin-right: 0 !important;
    }
    
    .content-wrap {
        padding: 10px 10px 10px 20px;
    }
    .archive .entry-summary, .blog .entry-summary, .search-results .entry-summary {
        margin-top: 0 !important;
    }
    
    

    EDIT: MOST OF THE USED CODE FROM THIS TOPIC HAS BEEN UPDATED HERE EXCLUDING MOVE FOOTER META

    #628459
    Chetan

    i have added this code now whats next

    #628462
    David
    Staff
    Customer Support
    #628465
    Chetan

    yes i did that

    #628471
    David
    Staff
    Customer Support

    OK, i edited the post above, and added the CSS you need, just add that to your Child theme or Additional CSS in the customiser.

    #628474
    Chetan

    it doesn’t look like what i wanted to

    #628476
    David
    Staff
    Customer Support

    I can’t see that the CSS has been added? If you have then clear any caches.

    #628484
    Chetan

    it works but i wants images to be rectangular and heading little small and bold

    #628487
    Chetan

    And there is gap between date and excerpt remove that

    Customize: All About Xiaomi – Know Everything About Xiaomi

    #628492
    David
    Staff
    Customer Support

    Adjust these two properties:

    -ms-flex: 1 0 35%;
        flex: 1 0 35%;

    Increase the % to 45% – may need tweaking a little.

    To make it exactly square will create issues with responsiveness. But give that a shot and let me know.

    You can change the headings in the Customiser under Colors > Body – Headings and Typography > Headings . The blog posts use the H2 heading.

    #628497
    Chetan

    I did that but it doesn’t look good. And please tell me how i can remove that space between date & excerpt and also i want to add category just after author name. Thank you.

    #628500
    David
    Staff
    Customer Support

    You need to add the Categories in the Customiser > Layout > Blog and then use this snippet to move them below the title:

    add_action( 'wp', 'tu_move_footer_entry_meta' );
    function tu_move_footer_entry_meta() {
        if ( is_home() ) {
            remove_action( 'generate_after_entry_content', 'generate_footer_meta' );
            add_action( 'generate_after_entry_title', 'generate_footer_meta' );
        }
    }

    once thats added we can look at the layout again

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.