Divi

While working with a template purchased from DIVICake the home page had 3 blurbs and I needed 4. I copied the modules from the third to a new 4 column and everything looked good. When I exited the page builder the new column and blurb were spaced wrong and other CSS styles were not working correctly.

After suffering some time I looked into DIVI’s caching and this fixed my issue. Here is the path.

DIVI >> Theme Options >> Builder >> Advanced     

Turn off “Static CSS Generation” till the site goes live.

I hope this helps someone else out there…

Working with a blurb and button below it I was getting the mismatched width at full screen or over 1900 pixels.

The CSS for the button was:

.et_pb_button_alignment_center {
width: 92%;
background: #FFF;
margin: auto !important;
}

I needed to get rid of the margin:auto !important;

The width was set with this CSS.

.et_pb_button_alignment_center {
width: 95%;
background: #FFF;
}

The blurb container was set;

.et_pb_blurb.et_pb_text_align_left .et_pb_blurb_content .et_pb_blurb_container {
text-align: left;
width: 100%;
height: 300px;
background: #FFF;
margin: auto;
}

The blurb content was this:

.et_pb_blurb_content {
position: relative;
max-width: 550px;
margin: 0 auto;
text-align: center;
}

Part of the issue is I had the “Advanced tab” and “Main Element” set with a width, but the child-theme stylesheet had different width. I also had the “Additional CSS” in the theme customerize setting the blurb to another width.

DIVI has a lot of options and perhaps too many.  When your working with DIVI try to not set the styles in more than one place.

I hope this helps someone else out there…