Three columns on main

Activello
1

Hello!

I want to my website look like:

Slider
Three columns with posts
1 featured post (100% with)
Three columns with post

At forum I’ve find code for 2 columns (below), but how can i get three?

@media (min-width: 768px) {
.blog.home #page .page-1 article.post:first-child,
.blog.home #page .page-1 article.post:nth-child(2) {
    width: 50%;
}
.blog.home #page .page-1 article.post:first-child{
    padding-right: 25px !important;
}

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

.blog.home #page .page-1 article.post:first-child .post-inner-content,
.blog.home #page .page-1 article.post:nth-child(2) .post-inner-content {
    margin: 0;
    padding: 0 0 50px 0;
    border-bottom: 0;
}
}
2

Hi @antontushnov,

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

You can try displaying three posts in a row 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.home #page .page-1 article {
    width: 30%;
    clear: none;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.blog.home #page .page-1 article.post:first-child .post-inner-content,
.blog.home #page .page-1 article.post:nth-child(2) .post-inner-content {
    margin: 0;
    padding: 0 0 50px 0;
    border-bottom: 0;
}

.blog.home #page article.post:nth-child(3n+1) {
    clear: left;
}
.blog.home #page article.post:nth-child(3n+2) {
       margin-right: 25px !important;
    margin-left: 25px !important;
}
}

Best Regards,
Movin

3

Hello, thank you for answer!

It’s very useful!

In early years I make blog with columns and use query_post function for it. Two years without experience, and now I dont understand how this css works)

Can you help me to make structure looks like:

Slider
3 columns + Slider
2 column
3 columns

Thank you.

4

Also, how can I add read more button to all posts (not only 2 first)?

5
Can you help me to make structure looks like:

Slider
3 columns + Slider
2 column
3 columns

I am not getting your point here so please describe it a bit more in detail.

Also, how can I add read more button to all posts (not only 2 first)?

Use the following custom CSS code to achieve this.

#page .read-more {
    display: block;
}
6

Hello!

Thank you for answer. I’ve solve the problem using sliders, as area for posts) It’s mean that I use 2 columns + some posts I’ve add to html slider code.

I have some another questions:

How can I add full width image in single post without slider? (see screenshot). I want to made narrow text with full width images…

How can I made slider image clickable? It doesn’t work on mobile.

7

You are most welcome here :slight_smile:

I have some another questions:

To help us keep support thread separates could you please create new thread for your other questions here Activello - Colorlib Support Forum instead of asking them in your single 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.