I have worked on this website for as many years as it has been live, and have edited and relayed out sections of it without ever an issue. Until last year.
- The site is built on Divi theme.
- The site has multiple admins for different reasons.
- I can see that there is a lot of custom code that has been added to the additional CSS panel by another of the sites admins, presumably to force their work to sit how they wanted it to. I suspect maybe something in there is causing it, if I can identify exactly what it is we can remove the code and find a work-around for the other. If indeed that turns out to be the problem. I have copied and pasted the code at the bottom of this message.
I have created an example of the problem on this page:
https://simplesolutionsaccounting.com.au/about2 – you need to scroll down under team and see bottom duplicates.
Here you will see, I have simply duplicated a "team member" row which has added a new staff member, but the settings that apply to all the other staff, now do not apply with the section is duplicated, as it always did perfectly before even though all the settings are identical. The text in each section has changed format and the first new entry after the previous has lost the standard spacing between the top of the new and bottom of the previous "team member" row.
Here is a page I managed to workaround the issue and get a good enough result:
https://simplesolutionsaccounting.com.au/about
The way I achieved this was by saving one of the existing rows to the template library then selecting it from there rather than duplicating, this worked for the existing ones, but yet when I try to use that again to add an additional staff member it no longer worked. Also the spacing was still off when I added the first new staff member, it sat far too close to the one above it, I tried adjusting the padding to no avail, the only way I could create a space between was to add a divider, yet when adding all subsequent ones after that the spacing was normal again.
I used to be able to simply duplicate a row and update the details. Now I cannot because the spacing and the text formatting is not the same, as the one it duplicated from, despite all the settings being identical.
I did just duplicate some others on the /about2 page and some are now duplicating correctly while others are not. Very confusing as it is not behaving logically at all.
I’m having other formatting issues with the site also, text line spacing too close together and when I try to alter the line spacing, nothing happens, it just refuses to acknowledge any changes I try to make in formatting settings.
In the past I had paid for the Divi support, but I found they were of no help whatsoever, they seemed to have an issue with communication and understanding issues even with screenshots and video provided to illustrate issues.
Custom CSS:
.gform_wrapper.gravity-theme .gfield_label {
line-height: 1.7!important;
}
#gform_wrapper_6 {
margin-top: 10px;
}
.gform_button {
color: #ffffff!important;
font-size: 16px;
font-weight: 500;
padding: 0.3em 1em;
line-height: 1.7em!important;
border-radius: 5px;
border: none;
box-shadow: none;
background-color: rgba(193,216,63,0.95);
}
.border-hover .et_pb_column {
overflow: hidden;
position: relative;
}
.border-hover .et_pb_column img {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.border-hover .et_pb_column:hover img {
transform: scale(1.1);
}
.border-hover .et_pb_column:hover .et_pb_image:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
content: '';
}
.border-hover .et_pb_column .et_pb_promo_description:before {
top: 50px;
right: 30px;
bottom: 50px;
left: 30px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
position: absolute;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s,
-webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.border-hover .et_pb_column .et_pb_promo_description:after {
top: 30px;
right: 50px;
bottom: 30px;
left: 50px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
position: absolute;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s,
-webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.border-hover .et_pb_column:hover .et_pb_promo_description:before, .border-hover .et_pb_column:hover .et_pb_promo_description:after {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.border-hover .et_pb_column .et_pb_promo_description h2 {
opacity: 0;
color: #fff;
position: absolute;
top: 37%;
width: 100%;
text-align: center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin: 0;
padding: 0;
}
.border-hover .et_pb_column .et_pb_promo_description p {
opacity: 0;
color: #fff;
position: absolute;
top: 42%;
width: 100%;
text-align: center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.border-hover .et_pb_column:hover .et_pb_promo_description h2 {
opacity: 1;
position: absolute;
top: 40%;
width: 100%;
text-align: center;
color: #fff;
}
.border-hover .et_pb_column:hover .et_pb_promo_description p {
opacity: 1;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #fff;
}
.border-hover .et_pb_promo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.border-hover .et_pb_promo_button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.et_pb_gutters3.et_pb_footer_columns4 .footer-widget {
width: 32.875%;
margin-right: 0;
}