When you place Divi Blurb modules in the same row that contain different size images, it looks bad. You can solve the problem by photoshopping all the images to be the same identical size. But it’s a lot easier to remedy the issue by applying a little CSS love. Here’s how.
The Problem
Here is an example of a row of Divi Blurb modules containing images of various sizes.
Blurb 1
Blurb 2
Blurb 3
The Solution
To get the images to be the same size, all we need to do is apply CSS that will force them to the same aspect ratio.
Option 1: Aspect Ratio 16:9
In most cases, I find a 16:9 aspect ratio looks most appealing. Here is what that looks like:
Blurb 1
Blurb 2
Blurb 3
Option 2: Aspect Ratio 4:3
In some cases, a taller landscape image is needed. In those cases, a 4:3 aspect ratio is what you need. Here is an example of a applying an aspect ration of 4:3 to all of the blurb modules.
Blurb 1
Blurb 2
Blurb 3
Option 3: Aspect Ratio 1:1
If you want square images, then a 1:1 aspect ratio is what you want.
Blurb 1
Blurb 2
Blurb 3
How to Implement the Solution
Step 1 – Add this CSS code.
Add the following CSS to the page or to the website. If you aren’t sure how to do this, you can find directions in this article.
.et_pb_blurb.aspect-ratio-16-9 .et_pb_main_blurb_image, .et_pb_blurb.aspect-ratio-4-3 .et_pb_main_blurb_image, .et_pb_blurb.aspect-ratio-1-1 .et_pb_main_blurb_image { position: relative; display: block; } .et_pb_blurb.aspect-ratio-16-9 .et_pb_image_wrap { padding-top: 56.26%; } .et_pb_blurb.aspect-ratio-4-3 .et_pb_image_wrap { padding-top: 75%; } .et_pb_blurb.aspect-ratio-1-1 .et_pb_image_wrap { padding-top: 100%; } .et_pb_blurb.aspect-ratio-16-9 .et_pb_image_wrap img, .et_pb_blurb.aspect-ratio-4-3 .et_pb_image_wrap img, .et_pb_blurb.aspect-ratio-1-1 .et_pb_image_wrap img{ position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; }
Step 2 – Assign the desired CSS class to the blurb modules.
In each of the blurb modules:
- Click on the Advanced tab
- Open the CSS ID & Classes section
- Type in the desired class from the list below
For an aspect ratio of 16:9 use aspect-ratio-16-9.
For an aspect ratio of 4:3 use aspect-ratio-4-3.
For an aspect ratio of 1:1 use aspect-ratio-1-1.
In the image below, the CSS class for the 16:9 aspect ratio has been assigned.
Summary
Using this technique, you can quickly and easily have all of the images in your Divi Blurb modules aligning nice and pretty.
If you have questions or issues, please leave a comment below. I’ll try to respond in a timely manner.
Thank you. I would like to do the same thing for the blog grid featured image???
Pascal
Pascal,
I’ll add that to my list of requests. When I publish an article on this, I’ll add another comment here.
I’m having trouble with this – for some reason, when I enter the CSS class, the image disappears. Any ideas?
Jake,
I’ve tested the code on a new website that we are developing and it worked fine. I’m at a loss as to why it isn’t working for you.
If you do solve the issue and determine the information here is incorrect or incomplete, please advise so that I can make the appropriate corrections.
This happened to me – put !important after each line of the css code. Example:
position: relative!important;
This saved me SOOO much time. This was a godsend!
Thanks, worked like a charm!
You are a hero – many thanks!