Convert Blog Page to 3 Columns in Essence Pro Theme

How do you convert the 2 columns blog page to 3 columns? Here is the simple procedure. You will edit the style.css file of your Essence Pro theme. Open the style.css file on editor and do the following changes:

/** Replace this CSS **/
.half-width-entries .content .entry {
    float: left;
    margin-left: 4%;
    text-align: center;
    width: 48%;
}
 
/** WITH THIS CSS **/
.half-width-entries .content .entry {
    float: left;
    margin-left: 4%;
    text-align: center;
    width: calc( ( 100% - 8% ) / 3 );
}

And

/** Replace this CSS **/
.half-width-entries .content .entry:nth-of-type(odd) {
	clear: left;
	margin-left: 0;
}

/** WITH THIS ONE**/
.half-width-entries .content .entry:nth-child(3n+1) {
	clear: left;
	margin-left: 0;
}
This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.