I’m trying to make it so instead of the first two being full-posts/full with “Read more,” just the first one is full and the rest are in grid form. Ideally I’d like it so the grid is even at the bottom as opposed to having a single post like it is now. Would adding unlimited scroll fix this as well?
How can I make the grid posts also include a “read more” button?
I’d also like to change the title font/size.
Thanks in advance!
Hi @patremagne,
I hope you are well today and thank you for your questions.
I’m trying to make it so instead of the first two being full-posts/full with “Read more,” just the first one is full and the rest are in grid form. Ideally I’d like it so the grid is even at the bottom as opposed to having a single post like it is now. Would adding unlimited scroll fix this as well?
You can try achieving this by using the custom solution shared in the following topic.
https://colorlibsupport.com/t/how-to-make-only-one-post-full-width-and-the-rest-in-grid/#post-58491
How can I make the grid posts also include a “read more” button?
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
.read-more {
display: block !important;
}
Best Regards,
Movin
Thanks for the response! The first one worked, but it made it so only one post is at the top of the grid just like the bottom (rather than the 2 to fill the width). Can this be adjusted so that the grid is full?
I’ve attached a screenshot of what I mean. I also noticed that the first grid post’s text doesn’t properly align with the featured image, and that the grey divider line is only under that one and nothing else.
Please try using the below CSS code removing the previously used code.
@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;
}
}
I’ve tried the CSS provided and it works, but not perfectly. Several things are not lined up properly/missing, such as the post header, category, featured image, and read more button.
I’m also having the same problem with the uneven spacing on the left entry of the blog. Are there any suggestions?
Several things are not lined up properly/missing, such as the post header, category, featured image, and read more button.
The featured image and post header will line up they are in proper width.
To line up other things i have changed the previously shared code so please try using that code.
@hdossary To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/activello/ instead of replying on others thread as it makes the thread messy and hard to read.
If you want to you can also add reference of this thread in your newly created thread.
We would be more than happy to help you on your new thread.
Thanks I understand you wanted to keep topics separate, but i’m having the same problems as @patremagne.
No new questions from me, just jumping on the back of his post.
Thanks in advance! 
@movin
That worked better, but the bottom two posts are still unaligned with the read more button. The leave a comment button is also inconsistently present - would it be easier to hide it or to make it present for every frontpage post?
That worked better, but the bottom two posts are still unaligned with the read more button.
We can’t align it because it is displayed on the position depending on the post content length. You can see in your shared screenshot that the content length of two posts are different.
The leave a comment button is also inconsistently present – would it be easier to hide it or to make it present for every frontpage post?
You can hide it by using the below CSS code.
body.home span.comments-link {
display: none;
}
Shouldn’t the posts have the same excerpt length by default? Notice how the […] cuts off in the left post several words less than in the right post. Would decreasing the number of words in the preview excerpt by one or two work? How can I do that?
Thanks!
@patremagne The excerpt is displayed by the standard WordPress function the_excerpt that trims down to a word-boundary and the default length is 55 words as length of characters in very word is different so the excerpts display differently but the number of words are same.
@movin Thanks for the info. I found that using Wordpress’s built-in Screen Option -> Excerpt and just using one less word in it works fine.
The last things I’m trying to do are the site title font:
span.site-name a {
font-family: arial;
font-size: 35px;
}
Is there a list of fonts that work instead of arial?
Adding a header image underneath the site title? Is it possible? I see in the preview that the slider occupies the space if it’s activated, but can I make it so that the slider doesn’t…slide from an image?
And finally, I’m trying to follow your tips in this thread and this, but the site I want to make a social icon for doesn’t have an icon at the site you linked (Goodreads.com). Ideally I want the social icons in the navbar like the second post I linked.
Thanks!
To help us keep support thread separates could you please create new thread for your new questions here https://colorlibsupport.com/c/activello/ instead of replying on your existing thread as it makes the thread messy and hard to read.
If you want to you can also add reference of this thread in your newly created thread.
We would be more than happy to help you on your new thread.