The Divi Theme’s portfolio module gives you the option of displaying your projects as a series of thumbnails (grid view). To adjust the size and spacing of the images in your thumbnail grid, you can use the following CSS:
/* Set the image widths */
.et_pb_portfolio_grid .et_pb_portfolio_item,
.et_pb_portfolio_grid .column_width,
.et_pb_portfolio_grid .et_pb_portfolio_image,
.et_pb_portfolio_grid .et_pb_portfolio_image.portrait img
{
width: 250px !important;
}
.et_pb_portfolio_grid .et_pb_portfolio_image img
{
min-width: 250px;
}
/* Set the image heights */
.et_pb_portfolio_grid .et_pb_portfolio_image,
.et_pb_portfolio_grid .et_pb_portfolio_image.landscape img
{
height: 250px !important;
}
.et_pb_portfolio_grid .et_pb_portfolio_image img
{
min-height: 250px;
}
/* Set the spacing between images */
.et_pb_portfolio_grid .et_pb_portfolio_item {
margin-bottom:26px !important;
margin-right: 26px !important;
}
.et_pb_portfolio_grid .et_pb_portfolio_item.last_in_row {
margin-right: 0 !important;
}Related Post: Adding CSS to the Divi Theme
It looks complex, but it’s very simple to change it to suit your needs. There are three parts. First we set the image width to 250px. Then we set the height to 250px (to get square images, in this case). Finally we set the space between adjacent images to be 26px.
The width normally available to the portfolio images is 1080px and if the images are taking up too much space the ones on the end will be pushed down to the next row. So if you want 4 images per row, make sure that 4*width + 3*spacing <= 1080px.
Hi,
Thank you for this very useful CSS. I have applied it to my site. The problem I'm having is that my images are now fuzzy like they are being blown up. Is there any fix for that?
Hey Julie, are you still having trouble with this? I took a look at the site linked in the comment. I can see a filterable portfolio on the homepage, but the code above in its current form only applies to standard portfolio modules, so I'm not quite sure if you've changed the module or were having the issue elsewhere? If you're still trying to get it to work, perhaps you can confirm the location of the portfolio for me? Thanks!
Hi, where do I have to put this CSS? I've never changed the CSS details using the divi theme. Thanks!
Hi Ricardo, I've just updated the post with a link to this one:
https://divibooster.com/adding-css-to-the-divi-theme/
It explains some of the options for adding CSS to Divi. Usually pasting the code into the "Divi > Theme Options > General > Custom CSS" box will work, as it should for the code in this post. I hope that helps.
Hi, I need to change my portfolio margin. I change it in my child theme, css file
.et_pb_portfolio_grid .et_pb_portfolio_item {
margin: 0 1px 1px 0!important;
}
But nothing change. I don't understand why?
Hi calamy, that CSS seems to be correct, so there's is likely either a problem in how it is being added, or some other CSS conflicting with it. If you haven't already, I'd try adding it into the "Divi > Theme Options > General > Custom CSS" box (to rule out an issue such as broken CSS elsewhere in the child theme style.css). Also, make sure you clear your browser cache and any caches in use on the site (e.g. in performance plugins). If that doesn't help, are you able to send me a link so that I can take a look? Thanks!
I would like to center my portfolio grid and tried adding display: flex and justify-content: center but neither seem to work. What is the class I would need to add this to?
Hi Becca, did you manage to solve this? I took a look at your site (as linked in your comment) and the portfolio on the homepage seems to be correctly centered on desktop and mobile. If your working on another page, are you able to send me a link? Or if I've missed something, please let me know! Thanks.
UPDATE: Aside from Dan's awesome CSS tweaks, I updated my functions.php file in my child theme to change the actual thumbnail that Divi produces. Right now, Divi appends _400x284 to your image. I wanted a square ratio and thumbs that were 250px x 250px so I added this filter:
// Begin custom image size for Portfolio Thumbs
add_filter( 'et_pb_portfolio_image_height', 'port_size_h' );
add_filter( 'et_pb_portfolio_image_width', 'port_size_w' );
function port_size_h($height) {
return '250';
}
function port_size_w($width) {
return '250';
}
add_image_size( 'custom-port-size', 250, 250 );
// End custom image size for Portfolio Thumbs
Simply change any reference to 250 to the sizes you want.
Great! Thanks for sharing your solution, Chris :)
Thank you a lot!
This is exactly what I've been scouring the Internet to find. Thanks Chris!
This changes the overlaying div but not the image thumbnail itself, which causes a "zoom" effect on the images. I want to change the actual thumbnail reference in the file in includes > builder > module > FilterablePortfolio.php – starting on line 371
This file references et_pb_portfolio_image. Can I put a filter in my functions.php to overwrite this current setting of 400px for height, and 284px for width so the thumbnail does not put "x400x284.png" on the end of the file? Could I then regenerate the thumbnail to my new size?
This is super helpful! Using your code helped me adjust the margins and image sizes. However, on different mobile device widths I would sometimes get a wrapped 4 column row, meaning the four images in each row would turn into a 3 image row and then 1 image row and repeat. To fix this, I simply changed the px into % (23% for 4 columns) and it fixed the problem.
Overall, this was the code I needed. Thanks so much!
Very clear and helpful. Thank you!
I have tried the CSS code in the "main" and "portfolio" CSS sections and the thumbnail size never changes. I also have Divi Booster and update the image size there, but again the thumbnail size is not changing.
any idea why it's not responding?
Thanks
Adam
Hi Adam, if you're manually adding the CSS, it should be added either via the theme options custom CSS box, or via a child theme. This post explains in more detail:
https://divibooster.com/adding-css-to-the-divi-theme/
Note that adding it in the "main" or "portfolio" CSS sections won't work. The reason is that these areas only accept CSS properties, rather than the full CSS rules given in the code above.
As for why Divi Booster isn't working, I'd suggest first making sure that it isn't a caching issue by following this post:
https://divibooster.com/divi-booster-and-caching/
If that doesn't help, is there any chance you can send me a link to the affected page, so that I can take a look?
I want to use this on the filterable portfolio – how would I go about this? Thank for your help.
Hi John, this post explains how to do it:
https://divibooster.com/change-divi-filterable-portfolio-grid-thumbnail-sizes/
I don't have the Divi Booster…Just Divi 2.5 I want my thumbs have a square format, how can I do that?
Hi Dany, do you have a link to the page you're trying to set square thumbs on? The above should work for the standard portfolio module, but perhaps you're using something else (like a gallery module, full width portfolio module, etc)?
It would be great to know where to use this code.
Hi Rafael, there are a couple of places you can add the code. This post should explain it for you:
https://divibooster.com/adding-css-to-the-divi-theme/