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

Bacon ipsum dolor amet tail porchetta bacon pork short loin, ham hock alcatra pig tenderloin buffalo meatball. Cow pork loin beef ribs capicola, tri-tip chislic tail prosciutto pancetta

Blurb 2

Drumstick kevin short loin pork belly, tail pork short ribs doner prosciutto frankfurter chicken. Alcatra prosciutto ham, sirloin frankfurter doner ham hock burgdoggen.

Blurb 3

Leberkas sausage jowl alcatra drumstick, beef ribs bacon ham brisket. Frankfurter strip steak landjaeger, filet mignon capicola pig salami shankle jowl.

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

Bacon ipsum dolor amet tail porchetta bacon pork short loin, ham hock alcatra pig tenderloin buffalo meatball. Cow pork loin beef ribs capicola, tri-tip chislic tail prosciutto pancetta

Blurb 2

Drumstick kevin short loin pork belly, tail pork short ribs doner prosciutto frankfurter chicken. Alcatra prosciutto ham, sirloin frankfurter doner ham hock burgdoggen.

Blurb 3

Leberkas sausage jowl alcatra drumstick, beef ribs bacon ham brisket. Frankfurter strip steak landjaeger, filet mignon capicola pig salami shankle jowl.

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

Bacon ipsum dolor amet tail porchetta bacon pork short loin, ham hock alcatra pig tenderloin buffalo meatball. Cow pork loin beef ribs capicola, tri-tip chislic tail prosciutto pancetta

Blurb 2

Drumstick kevin short loin pork belly, tail pork short ribs doner prosciutto frankfurter chicken. Alcatra prosciutto ham, sirloin frankfurter doner ham hock burgdoggen.

Blurb 3

Leberkas sausage jowl alcatra drumstick, beef ribs bacon ham brisket. Frankfurter strip steak landjaeger, filet mignon capicola pig salami shankle jowl.

Option 3: Aspect Ratio 1:1

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

Blurb 1

Bacon ipsum dolor amet tail porchetta bacon pork short loin, ham hock alcatra pig tenderloin buffalo meatball. Cow pork loin beef ribs capicola, tri-tip chislic tail prosciutto pancetta

Blurb 2

Drumstick kevin short loin pork belly, tail pork short ribs doner prosciutto frankfurter chicken. Alcatra prosciutto ham, sirloin frankfurter doner ham hock burgdoggen.

Blurb 3

Leberkas sausage jowl alcatra drumstick, beef ribs bacon ham brisket. Frankfurter strip steak landjaeger, filet mignon capicola pig salami shankle jowl.

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.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This