I just want them about 30% smaller. Square 1:1 – 1 / 1 = 1.00 = 100% Landscape 16:9 – 9 / 16 = 0.5625 = 56.25% Landscape 4:3 – 3 / 4 = 0.75 = 75% Landscape 3:2 – 2 / 3 = 0.6667 = 66.67% Portrait 9:16 – 16 /9 = 1.7778 = 177.78% Portrait 3:4 – 4 / 3 = 1.3334 = 133.34% Portrait 2:3 – 3 / 2 = 1.5 = 150%. This code will change the number of columns in the Portfolio module from 4 columns to 3 columns. You said you are using the Fullwidth Portfolio. This email list will send you an email when we post a new blog post. Any help would be much appreciated thanks. It will only work for the default portfolio modules. Required fields are marked *. NOTE: Always be sure to add the correct class to the Divi Portfolio Module or the Divi Filterable Portfolio Module so that it can change to the desired aspect ratio. Oh okay, well I’m glad you figured out how to get this this retrofitted. NOTE: You might want to also check out a similar but very different tutorial called How To Stop Divi Image Crop. Join over 4,200 others and subscribe to our helpful Divi videos! Open the Filterable Portfolio Module Settings > Advanced > CSS ID & Classes > CSS Class and then add the class lwp-title-portfolio to it. Now you can use this formula for other sizes as well! 1. Professional high-converting custom website design, Use your website to increase client leads and product sales, Premium website hosting, maintenance, and marketing, Get users to your site from your blog, ads, and social media, As usual, you can copy and paste these CSS snippets into the, How To Highlight Event Categories By Color In Divi Events Calendar, How To Style And Customize The Divi Post Navigation Module, How To Fix The Divi Theme Builder Post Content Module Width, https://www.peeayecreative.com/how-to-stop-divi-image-crop/, Divide the second number by the first number, Move the decimal over two places to the right. snap to fit. Hi Facundo, My tutorial is for the Portfolio and Filterable Portfolio. I was able to use your CSS as a guide, but could not get it to work fully. The next step is to add the custom css code in the Divi theme options to show the title on top of the image when you hover over it. Add CSS Class To The Divi Portfolio Module. Be sure to follow along the video to help you understand it, but it is pretty easy! This tutorial for the Divi Events Calendar plugin will show you how to highlight and style colors of specific events in event categories. Hello I used your method, but in the site I am setting looks ugly. You can do this by a snippet of CSS code to your Divi website. In this tutorial, I am will show you how to style and customize the Divi Post Navigation module with CSS for navigating previous and next posts and pages. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings. Or zoom in? Add a percent sign. Now go create a new page and give it a title and activate the Divi Builder. 2. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox. After adding the CSS Class to the Portfolio module you need to add the following CSS Code in the Theme Options of your website. This free Divi layout is a great way to display your portfolio when your featured images are of varying sizes. And an Unexpected token just after the final RBRACE itself. Masonry Filterable Portfolio Free Divi Layout. Hi Chad, Hi Annie, He loves helping small businesses, exploring, building websites with Divi, and teaching others. 3. Portfolio is a very important part of every business website. 25% OFF all Divi Plugins, Courses, and Child Themes! What I finally ended up with was this: .et_pb_portfolio_image.landscape { width: 80%; margin-left: auto; margin-right: auto; } Using 80% was the only thing I could do to get the images to be square, but… Read more ». It is fully responsive and the column number will adjust based on the device size with no media queries needed. Customers want to see some samples of our work before they will hire us so it is crucial to showcase our work in a pleasant way. I personally dislike anything with the name “Fullwidth” because they are outdated and lack essential features, and now with the sizing options in the regular modules they are essentially depreciated. Basically, the percentage is the height divided by width. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. Go to your Dashboard and add a new page. The first thing that you need to is add a CSS Class the Portfolio module. Next, go to the page where you would like to have your portfolio and add the imported section from the Divi Library. Thank you. The code can used to change the column number when the Portfolio module is set to use the Grid layout. But yes, if someone wants to use that, this will help. Choose Import and navigate to your download folder and go to Portfolio example 1 folder. Custom CSS can also be applied to the module and any of the module’s internal elements. For this tut I simply used a fullwidth header and then a section with a single column below it. 25% OFF all Divi Plugins, Courses, and Child Themes! HI, Nelson. In this tutorial, I'm going to share some handy CSS snippets to change the Divi portfolio or filterable portfolio featured image aspect ratio. Alternatively, add the CSS to you child theme style.css file. This code cannot be used for the Fullwidth Portfolio module. Your email address will not be published. I have no coding experience! In this tutorial, we will be using the same math, same code, and the same process as before to change the Divi Portfolio Module and Divi Filterable Portfolio Module image aspect ratio. If you want to change the number of columns in the Portfolio module to 2 columns, 5 columns or 6 columns then you can use the codes that are listed below. Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. Import the file Portfolio example 1 layout.json. When you say smaller…like add more margin around all four sides? Can I use this method with fullwidth portfolio? This will be fun! Most of us are familiar with image or video aspect ratios. If you are not sure here is a screenshot to help you understand where to add the CSS Class. We normally add a class in the module so that we only apply the code to a specific module on the website and not affect any other modules on the website. This code would need to be modified to work for product images. And this was just what I was looking for. Go to Divi > Divi Library and click on the Import & Export button. Blog Post Optin Form . The CSS Class can be added at Portfolio Module Settings > Advanced > CSS ID & Classes > CSS Class. In this article I will share the CSS Code and the steps to change the number of columns in a Portfolio module in the Divi theme. Hi, I have tired this however the CSS box isn’t one box but has various sections – so I went for the ‘portfolio image’ section. The codes shared below will work on both the Filterable Portfolio module and the Portfolio module. In this tutorial, I kept it very simple!