DiviTwist.com Logo

A Refreshing Twist of Tools, Tips & Tricks for Your Divi Site

The Super Easy Way to Fix the Divi Transform Z-index Issue

Jan 26, 2022

So you’ve added a module with a transform or negative margins to your Divi page, but it’s getting cut off at the edge of the row or section, and the z-index isn’t adjusting anything. You’ve tried everything in addition to adjusting the z-index. You’ve messed with margins and padding, but you’ve had no luck. Your module is just not showing up past the border.

Luckily there’s an easy fix, that requires very little customization.

The Issue is Not the Z-index

The issue is not with the z-index at all. It’s a little more complicated than that, and is more than we need to get into here. For our purposes, we are going to deal with it as if it is an issue with the border-radius.

The easiest fix would be to turn off the border radius completely. Sure, and that will fix your positioning issue, but if you’re site design relies on rounded corners, then you need another option.

The Steps to Set the Transform Right

First, you will want to go into your Divi page builder and go into the row or section that has the border you are trying to place the transform over. Select the “Design” tab on the top menu, and the go to the “Border Options.” In the section for “Rounded Corners” make note of the value(s) you have set for each of the corners, then next to the rounded corners, click the reset button to zero out all of the values.

 

Step 1 visual of reset

 

Next you need to go to the “Advanced” tab in the top menu. Select “Custom CSS.” In the block labeled “Main Element” add your code for the rounded corners. It will look something like this:

final step insert css for border-radius, not z-index
border-radius: 6px 0px 3px 4px;

Adjust the values to those you had originally set in the “Design” area. The above numbers should correlate like this:

border-radius: top-left-corner top-right-corner bottom-right-corner bottom-left-corner;

If all of your corners are the same, your code will look like this:

border-radius: 6px;

If your top-left and bottom-right corners are 6px and top-right and bottom-left values are 0px, it will look like this:

border-radius: 6px 0px;

Remember to save all of the settings in the builder and also on the page!

Note: If you previously messed with the negative margins, padding, and/or z-index, you will want to go back and adjust those to their defaults or values that will work for your, now functioning, design.

That’s it! Your module should now be visible past the border of your row or section, and you didn’t have to mess with the z-index once!

Elaboration and Collaboration

Check out the Divi Twist Forums

0 Comments

Submit a Comment

Your email address will not be published.