He rarely talks about himself in the third person... All opinions expressed on this site are my own. Were you guys able to figure out how to resolve the issue? This code will change the number of columns in the Portfolio module from 4 columns to 3 columns. clear: unset !important; If you’re using the default portfolio module that comes with Divi, you’ll need to add code to your functions.php file to change the size of the thumbnail – http://www.eleganttweaks.com/divi/changing-portfolio-blog-module-thumbnail-sizes/. I have a custom field in my posts. You would just modify the values in the CSS. This is because Divi’s default CSS will take over from 767px on down and change the grid to two columns and then down to one column on mobile. We modified the CSS to account for when a post doesn’t have a featured image. You’ll just need to change the 61 value to match the post number you’re having issues with. Please go to your WordPress Dashboard > Theme Options > General > Custom CSS and add the code below. Notice we are only changing the layout to three columns when the browser window is at least 767px. For larger tablets that would be 768px. https://pallmallmc.com/project/strategic-advisory/, http://www.eleganttweaks.com/divi/changing-portfolio-blog-module-thumbnail-sizes/, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout. The images are very big, from a photograph. So the images take up a lot of space, but they are only 400 x 284 thumbnails so they appear pixelated. About, It was working before, but I’m guessing a recent Divi update changed something…. And here’s the resulting three column layout: If you see an issue at either of the two breakpoints, it’s usually caused by a single post that applies to both the 3n+1 and 4n+1 rule. Please try that and let us know if you’re still having issues. I responded to your email. As mentioned earlier, by default, the Divi gallery module will display your image gallery in four columns on desktop and then break into three columns on tablet, two columns on small tablets (and large phones), and one column on phones. Contact, Optimising your website: A development workflow continued with Gulp 4, Creative Commons Attribution 4.0 International License. It does not occur again within the 105 products I’m displaying. I like using an ID for this as it has a high specificity and therefore should override other rules, without resorting to the dreaded “!important”. Use this IFTTT recipe to be emailed when there's a new blog post, Use this IFTTT recipe to get a notification when there's a new blog post. You can see the issue at the bottom of this page – https://pallmallmc.com/project/strategic-advisory/, Hi Kathryn. You can easily do this by applying a new class to the module and adding a little CSS to your child theme or the Custom CSS section in the Divi Options panel. Any advice? Keep in mind if you add the clear left rule, you’ll want to limit it to large screen sizes like I did in the example above. This seems to be a moving target with different versions of Divi and conflicts with 3rd party plugins. Rik Lewis is a Certified Geek, specialising in Uniface, PHP, javascript/jQuery and progressive web apps. margin: 0 7.5% 7.5% 0 !important; to something like this: Weird. That should remove the empty space between each portfolio item. I cannot seem to get the nth elements correct. Hi Richard. Does this work for large number of posts? I have the 3 column layout, how to reduce the white space between the columns? Then in our child theme’s stylesheet, we added the following CSS: That’s it! Thank you for the quick reply and fix! In our example, we add the following class three-column-grid to our module. Yeah, when displaying a large number of posts there can be some conflicts at certain posts in the grid. We are seeing the same issue on one of our sites, but it’s the 13th product that is throwing off the layout. clear: left; The CSS above is wrapped in a media query that limits it to only apply to screen sizes 768px or above. Thank you . If you need help with this layout, please create a support ticket and we would be happy to send you the custom CSS for this. Perfect! Are you able to assist? You can send it via our contact form if you prefer to not share in comments and we would be happy to take a look. }. If you still see two columns on mobile, you may need to update your version of Divi. min-height: 240px; clear: unset!important; /* clears the 4 column grid settings */ Any ideas? }, Or you can add a clear rule to every fifth item: Using this css and it works great, my only question is if there is a way to center the last item. My first thought would be to change the gutter spacing in the row to 0. There is no way around this with CSS, you can’t just check the visible ones. One of our most common requests at DiviPlugins is how to change the portfolio layout from four columns to three. clear: both!important; /* then overrides it with the 3 column grid settings */ It appears to be related to the CSS, .three-column-grid .et_pb_grid_item:nth-child(4n+1) { It … Thanks Taloha! With that said, I’ve been playing with Divi and came across a particular difficulty that almost sent me down a big rabbit hole, and that’s the Filtered Portfolio element, specifically if you want it displayed in anything other than the default 4 columns. And there you have it, crisis averted. I’ve applied this code and it works great, but in a smartphone screen the grid goes to 2 columns instead of 1 —I think it would be better. **Some of the links and images on this site are affiliate links for the Divi theme. But newer versions fixed this and changed it back to the original single column on mobile. This layout suits the architecture industry perfectly. I would suggest testing the layout at these two breakpoints: 981px or greater and 768px – 980px. Hi Thank you. Now, .et_pb_grid_item:nth-child(5n) { Hi Kimberley. One of our most common requests at DiviPlugins is how to change the portfolio layout from four columns to three. I get 4 then 3 then random columns in the 5 column set. It's a win-win for everyone!!!! Can I pull it into this portfolio module to appear next to the excerpt? but I can’t quite get a handle on what’s happening. In short; feel free to share and adapt, but provide attribution. Anything under 768px is controlled by the CSS included in the Divi theme and is not affected by the CSS above. When I do this; the first page of the posts look as they should. I used this code in a website and the images are not sharp, when I use the Grid as 3 columns. You may have custom code that is causing this. And the internet seemed to think that javascript was the way to go, and I was absolutely about to throw myself headlong down the rabbit hole. And provided example code on how you can target a specific item in the grid. Never mind — I think I figured it out! How can I send you the link to the web? Our latest plugin, Divi FilterGrid, makes it even easier to change the columns. } After adding the CSS Class to the Portfolio module you need to add the following CSS Code in the Theme Options of your website. Content is licensed under a Creative Commons Attribution 4.0 International License. You can override a single item like this: This should override the clear value for the 61st post in the grid but only when the screen size is between 768px and 980px. Any help would be greatly appreciated. The same happens again for the 73nd product and the 74th and 75th product. The Divi Builder allows you to have up to four columns for page layouts. And, for most websites, four columns is all you need. Why its happens? That is very strange Patrick. This website is not affiliated with nor endorsed by Elegant Themes. I have just applied this code and it works great.