Archive page posts in to 4 and 3 columns

Sparkling
1

Dear Sir,
Would you please tell me how i can make my full-width archive page posts in to 4 and 3 columns?

Thank you
Subajee

2

Hello there,

I hope you are doing well today.

Doing this would require you to change the coding structure of the page however you could use the Site Origin plugin to add the columns to the page instead.

Here is a link to the plugin:

Best Regards,
Support

3

Dear Sir,
I’m looking a solution for this without any plugins ?

Thank you
Subajee

4

We have to develop custom code to achieve this without using plugin.

Could you please share me the page URL from your site where it is displaying so that i can help you to achieve it?

5

Dear Sir,
Kindly Find below link
https://www.mystyleholidays.com/blog/

Thank you
Subajee

6

You can make it three columns by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Additional css

@media (min-width: 786px) {
body.archive #page article.post:nth-child(even),
body.blog #page article.post:nth-child(odd) {
    clear: none;
}
body.archive #page article.post:nth-of-type(3n+1) {
    clear: left;
}
}
7

Dear Sir (Movin)
Again Thank you very much for your dedicated support.
code is works fine … but it’s not working for my custom post type archive page… would you please help me to fix this.

Thank you
subajee

8

Hi there,

I hope you are having an awesome day and thanks for contacting us regarding your query.

This can be done with the help of some Custom CSS. Kindly provide me with a link to a one of your custom post type pages so that I may be able to write up some CSS that should work for that.

Looking forward to your reply :slight_smile:

Cheers!

9

Dear Sir,
Kindly Find below link
https://www.mystyleholidays.com/activities/

Thank you
Subajee

10

To make it work on that page try using the below custom CSS code.

@media (min-width: 786px){
	
	 
body.archive .site-main article.activities{
    width: 25%;
    float: left;

}

body.archive .site-main article.activities{
    padding-right: 25px !important;
}
body.archive .site-main article.activities{
    padding-left: 25px !important;

}
body.archive .site-main article.activities .post-inner-content {
  padding: 25px;
  background: #f7f6f6 none repeat scroll 0 0;
}
body.archive article.activities:nth-child(even),
    body.blog article.activities:nth-child(odd) {
	clear: none;
    	}

body.archive #page article.activities:nth-of-type(4n+1) {
    clear: left;
}
    body.archive nav.navigation.pagination{
    clear: both;
 }
}