Layout Design Like SiteLibrary (Charge)

Yes you can definitely replicate this.

Can you link us to the site you're trying to apply this?

Thank you.

https://www.masteryblogging.com/

Can you specify which part of the site do you want this applied?

If its on the "Most recommended posts", you can try this CSS code:

article.elementor-post.elementor-grid-item {
    background-color: rgba(0,0,0,0.02);
    transform: scale(1);
    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
    transition: all 0.1s ease-in;
}

article.elementor-post.elementor-grid-item:hover {
    transform: scale(1.01);
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
}

I want to apply in the archive section like someone clicks on my blogging category, it shows layout like that here: on my blog page https://www.masteryblogging.com/blog/.

Try this out.

.uagb-block-4849a8de .uagb-post__items article {
    background-color: rgba(0,0,0,0.02);
    transform: scale(1);
    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
    transition: all 0.1s ease-in;
}

.uagb-block-4849a8de .uagb-post__items article:hover {
    transform: scale(1.01);
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
}

Hey Sanu,

Can you check with the plugin support (Elementor and UAGB) if Elvin's code above doesn't work?

Please be mindful that the questions here should be directly related to the GeneratePress theme or GP Premium plugin:
https://www.screencast.com/t/W7vOHMRsn

We appreciate your understanding :)

Hmmm, my bad.

I didn't check when I posted a question.

I have removed UAGB and elementor, now is there any chance to make like this: https://www.loom.com/share/15bca21675164b4e9ba333b76b28b6fe

I found it from site-library of GP.

I want to achieve it only on Archive Section like, in this page: https://www.masteryblogging.com/

or if someone searches or go to my category wise page....can we make it?

The content from that page is all coming from Elementor.

Am I missing something?

ohh again sorry, it was the homepage....🙏

Here it is: https://www.masteryblogging.com/blogging/

This link is only of Blogging category,,,I want in all category pages (don't know archive page and category both are same)

Hi,

You can try this out.

.generate-columns-container > article > .inside-article {
    background-color: rgba(0,0,0,0.02);
    transform: scale(1);
    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
    transition: all 0.1s ease-in;
}

.generate-columns-container > article:hover > .inside-article:hover {
    transform: scale(1.01);
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
}

thanks, Elvin

It worked but the only thing I need is could you help me to fix the text, means the text is touching the border so I need to give padding left and right.. how to make this

You can try this CSS.

.generate-columns-container > article > .inside-article > .entry-header, .entry-summary, .entry-meta {
    padding-left: 20px;
    padding-right: 20px;
}

Just change the px value to your preference.

it helped.

Nice one. Feel free to open a new topic if you have any other concerns.

Cheers. :D