How to change the last 2 grids (in columns) into a full width on the front pg?

Activello
1

Hi

I would like to change the last 2 grids (in columns) to a full width post (like the 2 full width posts in the default demo front page - https://colorlib.com/activello/)

I saw some similar questions on the forum but proposed solutions (like the one below) does not work for me.

@media (min-width: 768px){
body.blog.home .page-1 article.post:first-child,
body.blog.home .page-1 article.post:nth-child(2) {
width: 50%;
clear: none;
float: left;
}

body.blog.home .page-1 article.post:first-child {
padding-right: 25px !important;
}
body.blog.home .page-1 article.post:nth-child(2) {
padding-left: 25px !important;

}
body.blog.home .page-1 article.post:nth-child(2) .post-inner-content {
padding: 0 0 50px;
}

}

Can you advise me how to change it? Thanks!!!

2

Hi @wanderer74,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

.blog.home #page article.post {
    width: 100%;
    padding: 0;
}

Best Regards,
Movin

3

Hi

Thanks so much!

Sorry maybe I should make myself clear. I would like the LAST 2 grids (2 columns) to become a full width entry on the front page.

But I also like the 2 grids above the last 2 grids to remain as 2 grids. So I have 2 full width followed by 2 grids (2 columns) and followed by 1 full width.

The code you provided changed everything to full width.

Hope I am clear! Sorry it may sound confusing.

4

Please use the below CSS code to achieve it.

.blog.home #page article.post:nth-of-type(5),
.blog.home #page article.post:nth-of-type(6) {
    width: 100%;
    padding: 0;
}

.blog.home #page article.post:nth-of-type(5) .post-inner-content ,
.blog.home #page article.post:nth-of-type(6) .post-inner-content {
    border-bottom: 1px solid #dedede;
        padding: 50px 0;
    margin-bottom: 30px;
}