Force Divi Blurb Module Images to a Uniform Size

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.

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:

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.

Option 3: Aspect Ratio 1:1

If you want square images, then a 1:1 aspect ratio is what you want.

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.