Posts not displaying correctly on main page

Activello
1

Hi, thank you very much for your help.

I am using the custom CSS solution provided in the post [Support request] A few questions: how to make only the first post full; and regarding font that follows:

@media (min-width: 768px){

body.blog #main.page-1 article.post:nth-child(2) {
width: 50%;
float: left;
clear: left;
padding-right: 25px !important;
}

body.blog #main.page-1 article.post:nth-child(2) .post-inner-content{
border-bottom: 0;
margin-bottom: 0;
}

.blog.home #main article.post:nth-child(odd) {
clear: none;
padding-right: 0 !important;
padding-left: 25px !important;
}

.blog.home #main article.post:nth-child(2n+2) {
clear: left;
padding-right: 25px !important;
}
.blog.home #main article.post:nth-child(even) {
padding-left: 0 !important;
}
.blog.home .page-1 article.post:nth-child(3) .post-inner-content {
padding: 50px 0;
}

}

As you can see in the attached image, the size of the images is not right.
All the image sizes are the same, all the thumbnails have been regenerated and I am using the plugin Advanced Excerpt for the excerpts.

How could I solve this?

Thank you very much again.

2

Hi @twiap,

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

I don’t see the issue in your shared screenshot so could you please tell me a bit more in detail what is the issue?

Also could you please share me your site URL where it’s happening so that i can troubleshoot it?

Kind Regards,
Movin

3

Thank you for your answer @Movin.

This is the URL of the website: http://theworldisapanuelo.com/

Thank you very much,
Alfonso

4

Instead of above shared CSS code, 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


@media (min-width: 768px) {

    .blog article.post {
        width: 50%;
        margin: 0;
        padding-right: 10px;
        display: inline-block;
        float: left;
    }
    .blog article.post .read-more, 
    .blog article.post .entry-footer {
        display: none;
    }
    .blog article.post .post-inner-content {
        border: 0;
        padding: 0 0 30px;
    }
    .blog .page-1 article.post:first-child, 
    .blog .page-1 article.post:nth-child(2) {
        width: 100%;
        padding: 0!important;
    }
    .blog .page-1 article.post:first-child .post-inner-content, 
    .blog .page-1 article.post:nth-child(2) .post-inner-content {
        border-bottom: 1px solid #dedede;
    }
    .blog .page-1 article.post:first-child .post-inner-content {
        padding: 0 0 50px;
    }
    .blog .page-1 article.post:nth-child(2) .post-inner-content {
        padding: 50px 0;
        margin-bottom: 30px;
    }
    .blog .page-1 article.post:first-child .read-more, 
    .blog .page-1 article.post:nth-child(2) .read-more, 
    .blog .page-1 article.post:first-child .entry-footer, 
    .blog .page-1 article.post:nth-child(2) .entry-footer {
        display: block;
    }
    .blog article.post:nth-child(odd) {
        clear: left;
        padding-right: 25px;
    }
    .blog article.post:nth-child(even) {
        padding-left: 25px;
        padding-right: 0;
    }

    body.blog #main.page-1 article.post:nth-child(2) {
width: 50%;
float: left;
clear: left;
padding-right: 25px !important;
}

body.blog #main.page-1 article.post:nth-child(2) .post-inner-content{
border-bottom: 0;
margin-bottom: 0;
}

.blog #main article.post:nth-child(odd) {
clear: none;
padding-right: 0 !important;
padding-left: 25px !important;
}

.blog #main article.post:nth-child(2n+2) {
clear: left;
padding-right: 25px !important;
}
.blog #main article.post:nth-child(even) {
padding-left: 0 !important;
}
.blog .page-1 article.post:nth-child(3) .post-inner-content {
padding: 50px 0;
}
}