Responsive 50/50 Full-Width Layout in Divi

We’ve all seen them, a full width layout with two columns, one containing a Text module, one containing an Image module, but how to make them responsive on everything?

As per usual, I shall be using the magical Flex display property and by the end of this very short tutorial you will be able to create a perfectly responsive 50/50 layout with just a few extra lines of CSS.  Trust me, this is very easy.

Before we dive in, there are some important things to consider when creating such a layout, the most important is that the image size you choose to use is big enough to match the height of the content in your text module. If you have a lot of content in your text module, the module will get taller when you reduce the browser width so the image next to it needs to be able to grow to match.

For this tutorial I’m going to use a 16:9 image ratio that matches most monitors (1920px x 1080px). We only need half that width to fill 50% of the screen but because we want it to be slightly taller if our text content changes I’m going a little bigger at 1200px x 675px.

Another important thing to consider is the image content. I want to make sure that the important part of the image doesn’t get cropped on smaller screens. There’s no right or wrong here, it really depends on the image you want to use but for this example, the important part of my image will be no more than roughly 50% of the image width.

Let’s get our hands dirty and create a simple layout to begin with.

Load a standard section and choose a 2 column layout then open the settings for the row. Click the Design Tab and set the ‘Make This Row Fullwidth‘ toggle to the Yes position, the ‘Use Custom Gutter Width‘ toggle to the Yes position and move the ‘Gutter Width‘ slider to the far left. Set the ‘Equalize Column Heights‘ toggle to the Yes position and if you want a background color for your text columns, add it now to the row.

Select the Design Tab, scroll to the bottom and add 0px padding to all the input boxes for the Custom Padding boxes.

Custom Classes

We’ll add some custom classes to make it easier to target the items we want.
Select the Advanced Tab and add a custom class to the CSS Class: input box; I’m using fifty-fifty for this tutorial.
In the Column 1 CSS Class input box, add a custom class for the column containing our text and in the Column 2 CSS Class input box, enter a class for our image column. I’m using text-column and image-column.

Add Some Content

We’ll add a text module in the left hand column with some dummy text and add 50px padding to the text module. We’ll add an image module in the right hand column with our first image. We’ll then duplicate the row, change the text in the text module, change the image in the image module then swap the text and image module positions so that the image module is on the left and the text module is on the right. We’ll also need to swap our classes (text-column and image-column) around in the new row’s Advanced Tab.

Just a few lines of CSS

But first, lets see what we’ve got so far. As you can see in the image on the right (below if on mobile) with the browser window resized the images shrink and text modules become taller. Our layout is broken, so let’s fix it by adding some CSS. You can add your custom CSS to your page settings, Theme options or child theme stylesheet whichever you prefer.

The Text Module Columns

First we’re going to target our text modules column to center the content vertically although this step is purely optional.

.fifty-fifty .text-column { display: flex; align-items: center; }.fifty-fifty .text-column { display: flex; align-items: center; }

Because we’re using custom classes, centering vertically is applied to all of our text columns with just a coupe of lines of CSS.

The Image Module Columns

Next we’ll target our image modules using the Flex display property and object fit which is similar to the background-size property used for background images. You can alter the object position to suit your images. We’re also using flex-grow:1 on the image selector. This is to make sure that our images still fill the entire column on higher resolution monitors.

.fifty-fifty .image-column .et_pb_image_wrap { 
  display: flex;
}
.fifty-fifty .image-column .et_pb_image_wrap img { 
  object-fit: cover;
  object-position: center;
  flex-grow:1; 
}

.fifty-fifty .image-column .et_pb_image_wrap { 
  display: flex;
}
.fifty-fifty .image-column .et_pb_image_wrap img { 
  object-fit: cover;
  object-position: center;
  flex-grow:1; 
}

Almost done…

There’s only one thing left to do, when we reduce the width of the browser beyond Divi’s 980px breakpoint, our columns aren’t ordered very nicely. We end up with a text module, Image then another image, then the last text module. We can re-order our columns to alternate using Flex and the Flex-Direction property.

To keep things clean we will add another class in the second row next to our existing fifty-fifty class. I’m simply using ‘reorder‘ so our CSS to reverse the order of columns in the second row will look like this.

@media screen and (max-width:980px) {
  .fifty-fifty.reorder {
    display: flex;
    flex-direction: column-reverse;
  }
}

@media screen and (max-width:980px) {
  .fifty-fifty.reorder {
    display: flex;
    flex-direction: column-reverse;
  }
}

Now we’re done.

That’s all there is to it, much easier than it used to be making use of the Flex and Object-fit properties. Take a look at the layout below and let me know what you think in the comments.

Update: Since writing this article there is a new span tag in the image module so if you’re re-visiting this page because your layout suddenly isn’t working correctly that will be why.

You can quickly fix it by changing every instance of the .et_pb_image class in your CSS selectors to .et_pb_image_wrap
If you’re still unsure the code has been updated so you’ll have to read it all again.