increase no. of columns

Hi there,

There isn’t a built in way to increase the number of columns that portfolio items are displayed in with Sketch, but you could create five columns with some custom CSS.

To add custom CSS, firstly set up a child theme or activate a custom CSS plugin. If you have Jetpack installed then you can activate its custom CSS module.

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

@media screen and (min-width: 50em) {
.project-navigation-wrapper .jetpack-portfolio:nth-of-type(3n+1), .page-template-portfolio-page-php .jetpack-portfolio:nth-of-type(3n+1), body[class*="jetpack-portfolio"].archive .jetpack-portfolio:nth-of-type(3n+1) {
	clear: none;
}

.project-navigation-wrapper .jetpack-portfolio:nth-of-type(3n), .page-template-portfolio-page-php .jetpack-portfolio:nth-of-type(3n), body[class*="jetpack-portfolio"].archive .jetpack-portfolio:nth-of-type(3n) {
    clear: none;
    margin-right: 2%;
}

.project-navigation-wrapper .jetpack-portfolio:nth-of-type(5n+1), .page-template-portfolio-page-php .jetpack-portfolio:nth-of-type(5n+1), body[class*="jetpack-portfolio"].archive .jetpack-portfolio:nth-of-type(5n+1) {
    clear: left;
}
.project-navigation-wrapper .jetpack-portfolio:nth-of-type(5n), .page-template-portfolio-page-php .jetpack-portfolio:nth-of-type(5n), body[class*="jetpack-portfolio"].archive .jetpack-portfolio:nth-of-type(5n) {
    clear: right;
    margin-right: 0;
}

.project-navigation-wrapper .jetpack-portfolio, .page-template-portfolio-page-php .jetpack-portfolio, body[class*="jetpack-portfolio"].archive .jetpack-portfolio {
	width: 18%;
}
}

Let me know how you get on with that or if you have any other questions.

we’ve decided to go with a different theme but thank you so much for your response. maybe it can help others who are looking to do that!

You’re welcome! If you decide to give Sketch another go then you know where to find us, too. ??

Hello,

I added the mentioned code and it also makes the “More Projects” area five columns. See the bottom of this page – https://www.bigink.org/portfolio/ali-osborn/. How do I correct that ?

Thank you!
L

@newenglandfelting: Good catch! I should have spotted that.

You can correct that by explicitly targeting the .page-template-portfolio-page at the very start of each snippet:

@media screen and (min-width: 50em) {
    .page-template-portfolio-page .project-navigation-wrapper .jetpack-portfolio:nth-of-type(3n+1), .page-template-portfolio-page-php .jetpack-portfolio:nth-of-type(3n+1), body[class*="jetpack-portfolio"].archive .jetpack-portfolio:nth-of-type(3n+1) {
        clear: none;
    }

    .page-template-portfolio-page .project-navigation-wrapper .jetpack-portfolio:nth-of-type(3n), .page-template-portfolio-page-php .jetpack-portfolio:nth-of-type(3n), body[class*="jetpack-portfolio"].archive .jetpack-portfolio:nth-of-type(3n) {
        clear: none;
        margin-right: 2%;
    }

    .page-template-portfolio-page .project-navigation-wrapper .jetpack-portfolio:nth-of-type(5n+1), .page-template-portfolio-page-php .jetpack-portfolio:nth-of-type(5n+1), body[class*="jetpack-portfolio"].archive .jetpack-portfolio:nth-of-type(5n+1) {
        clear: left;
    }

    .page-template-portfolio-page .project-navigation-wrapper .jetpack-portfolio:nth-of-type(5n), .page-template-portfolio-page-php .jetpack-portfolio:nth-of-type(5n), body[class*="jetpack-portfolio"].archive .jetpack-portfolio:nth-of-type(5n) {
        clear: right;
        margin-right: 0;
    }

    .page-template-portfolio-page .project-navigation-wrapper .jetpack-portfolio, .page-template-portfolio-page-php .jetpack-portfolio, body[class*="jetpack-portfolio"].archive .jetpack-portfolio {
        width: 18%;
    }
}

Let me know how that goes and thank you for bringing that oversight to my attention. ??

The updated code worked like a charm! Thanks for your help.

You’re most welcome! Have a wonderful weekend.