[Resolved] How to make my archive posts like this

Hi Vidyut,

You can try adding something like this through Appearance > Customize > Additional CSS:

body.archive .inside-article {
    padding: 0;
    transition: all 0.3s ease;
    box-shadow: 0 0 4px 1px #c6c6c6;
    
}
body.archive .inside-article:hover {
    transform:scale(1.05);
    box-shadow: 0 0 16px 1px #000;
}

This is also possible through GB Pro. See: https://docs.generateblocks.com/article/effects-overview/

Are you trying to replicate the example site exactly?

If so try disabling the Content template you’ve created first – the example site isn’t using one.

Now set the featured image position to above title

Then uncheck display padding around images.

Reference: https://docs.generatepress.com/article/adjusting-the-featured-images/

Okay, it is working. But, I don’t want the white space

Add this CSS:

.entry-summary, footer.entry-meta {
    display: none;
}

Then consider reducing the content padding – try something like 30px all around:
https://docs.generatepress.com/article/content-padding/

Also the border, shadows and others are not same as the site I sent.

You can adjust the box-shadow property in Fernando’s CSS here:
https://generatepress.com/forums/topic/how-to-make-my-archive-posts-like-this/#post-2524028

This resource might be helpful: https://www.cssmatic.com/box-shadow

Please be mindful of our support forum scope:
https://generatepress.com/what-support-includes/

Thanks!

Can you share a link where it’s not appearing like that?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Try adding this CSS:

body.blog .inside-article {
    transition: all 0.3s ease;
    box-shadow: 0 0 4px 1px #c6c6c6;
    overflow: hidden;
    
}
body.blog .inside-article:hover {
    transform:scale(1.05);
    box-shadow: 0 0 16px 1px #000;
}

You’re welcome, Vidyut!