i want my blog post to look different on mobile

Hi there,

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

On desktop i want it like this
https://i.imgur.com/6tr0cKW.png

and on mobile like this
https://i.imgur.com/9ZWhTcY.png

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

i have added this code now whats next

Can you make the customiser changes i mentioned here:

https://generatepress.com/forums/topic/i-want-my-blog-post-to-look-different-on-mobile/#post-628265

yes i did that

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.

it doesn't look like what i wanted to

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

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

And there is gap between date and excerpt remove that
https://i.imgur.com/BUS9cg6.png

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.

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.

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