[Resolved] How to make my archive posts like this

[Vidyut]

I want my posts container featured images to appear full and also the text. Secondly, I want the posts grids have shadow and animation. Like the first url I’ve shared.

Second URL is my site, where I want to have that.

[Fernando]

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/

[Vidyut]

Not working

[Leo]

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.

[Vidyut]

Still it is same

[Leo]

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/

[Vidyut]

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

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

Lastly, I think the code is only for archive pages, but I want all the post grids like that. For example, I want to show same posts grids in my homepage.

[Leo]

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!

[Vidyut]

Thanks a lot, it is working. Lastly, can you tell me when I will create the homepage like the site I sent, how can I show that type of post grid? Because the code is only for Archive pages not for all posts grids.

Thanks.

[Fernando]

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

[Vidyut]

Here in the homepage.

[Fernando]

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;
}

[Vidyut]

ok thanks.

[Fernando]

You’re welcome, Vidyut!

[Author]

Posts