We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.
You can use custom CSS to change how Portfolio Grid thumbnails are displayed globally depending on device width, or do the same on a page-by-page basis.
Changing thumbnails by device width (globally)
Let's say you want to set your Portfolio Grid thumbnails to be three-across for Desktop Wide. To do that, add this CSS code under Customize > Advanced > Custom CSS (being sure to select Desktop Wide from the dropdown):
.thumb {
width: 33.333% !important;
max-width: 33.333% !important;
flex-basis: 33.333% !important;
}
You can modify this code and placement depending on your desired results. For example, if you want to set your thumbnails to be two-across for Tablet Wide, just place this code in the Tablet Wide CSS editor:
.thumb {
width: 50% !important;
max-width: 50% !important;
flex-basis: 50% !important;
}
Changing thumbnails by device width (page-by-page)
You can also force thumbnail widths on a page-by-page basis, which is helpful if you have multiple portfolio grids for different project categories. Say you have a photography page with a Portfolio Grid where you want to display a different custom thumbnail width from your main portfolio page.
Go to Page > Branding (colorful dots at top right of content editor) > CSS Editor. Now copy and paste the following code, in which we use media queries to make the effect only take place at certain device widths:
@media only screen and (min-width: 678px) {
.thumb {
width: 33.333% !important;
max-width: 33.333% !important;
flex-basis: 33.333% !important;
}
}
Now, any thumbnail in your Portfolio Grid will be set to three-across on this page only, and only when the browser width is above 678 pixels.
Have fun!