[Resolved] Update Display Breaks

[Author]

Posts

[CharlesB2907]

Hi,

The original site I created with Toolset and Divi a few years ago was not updated for some time because for some reason their is a display distortion from the original view that has prevented the update on the live site.

Now, this has grown into a monster of a security issue as a result of the number of outdated plugins. I created a clone of the live site and updated all plugins.

Before doing so, I took before and after screenshots to show the display distortion. I hope that you can help me determine what is causing and hopefully assist in resolving it. The live source site is jayzerbe.com the clone that I recently updated is clone.jayzerbe.com and you can see how the featured image in the left column breaks the column structure and lapses into the center column.

I have not updated the live site because of this issue.

Can you please help determine what is causing this?

[Luo Yang]

Hello,

I assume we are talking about this URL:
hidden link

It is a CSS issue, your will need to disable/remove this CSS codes:

.et-db #et-boc .et-l .et_pb_image_0 {
    width: 1440px;
...
}

See my screenshot:
hidden link

[CharlesB2907]

HI,

Thank you for the information. Sorry for the delay, my email address is correct in my account settings but for some reason I am not receiving your notifications, inbox spam or otherwise.

I checked the customizer custom CSS but this code isn't in that location. Is there any indication as to where I can access it to remove it?

[Luo Yang]

It is in your web page HTML source code:
view-source:hidden link
line 616:

<style id="et-builder-module-design-21087-cached-inline-styles">.
...

I am not sure where it comes from, it seems from other plugins/theme, you can try to deactivate other plugins/theme one to one, and locate the problem source.

[CharlesB2907]

Since all product displays have the same distortion, wouldn't have to be in the site custom CSS or someone in the toolset view or template?

[CharlesB2907]

This only happens after I update the plugins to their current versions. The previous version on the live site is not affected, but very out of date.

In addition to all product pages, search results are affected as well as can be viewed here: hidden link

[Luo Yang]

Q1) Since all product displays have the same distortion
Please check my answer above:
https://toolset.com/forums/topic/update-display-breaks/#post-1821777
I have searched the keyword "et-builder" in google:
hidden link

These CSS codes are from Divi builder, you might consider to check it with their support for it:
hidden link

Q2) search results are affected
Same as above, the problem is from Divi builder, see my screenshot et-doc.JPG, it is Divi builder setup each columns width with a very large value, and conducts the problem, you will need to check it with Divi support

[CharlesB2907]

Hi,

Thank you for suggesting that I contact Divi. They provided the following CSS code which has resulted the display issue.

.et-db #et-boc .et-l .product.first .et_pb_image_0 {
width: auto !important;
text-align: center;
}
.page-id-19394 .et_pb_image {
width:auto !important;
}

My next step is to beginning rebuilding this site, but I will consider a less complicated match than Toolset and Divi.

I very much appreciate your help.

Thank you.

[CharlesB2907]

My issue is resolved now. Thank you!