All Collections
FAQ's and Troubleshooting
Website Looks Different After Updating Divi
Website Looks Different After Updating Divi

Website Looks Different After Updating Divi

Marius avatar
Written by Marius
Updated over a week ago

When a theme is updated, that means the current theme files are replaced with the ones from the new theme version.

Looking at Appearance -> Editor can give you informations about the current theme version and actually see the theme files, which will be replaced: 

As you notice, there are files like style.css or style.min.css where all the styling for the theme is present by default.

When a website is customized beyond the default way of how it's provided by the theme developer, it means the CSS properties through out the theme are changed, with various methods: Theme Customizer, custom CSS code into the Advanced fields of sections/rows/modules, Custom CSS from Theme Options or 3rd party plugins which act over and change styles.

If the website looks different after a theme update, we should take into consideration:

  1. Plugin conflicts

  2. Child theme conflicts

  3. Static CSS File Generation

Plugin conflicts:

If the website looks different after a theme update, it could be that a plugin is blocking some resources and you can verify this by simply deactivating all the plugins with no exception and see if the issue has gone.

If that's the case, then you need to activate the plugins one by one, refreshing after each activation to see which plugin is the culprit in this case.

With over 55.000 plugins in the WordPress repository, you can find an alternative plugin at www.wordpress.org/plugins

Child theme conflicts:

Another reason could be that some styling has been saved into the child theme, which was working before the update, but for various reasons like how the child theme was built and the styling was linked, after the update stopped working. 

In this case, switch to the parent theme and see if the issue persists.

Static CSS File Generation:

Go to Theme Options -> Builder -> Advanced and DISABLE the Static CSS File Generation:

If the issue is gone, check for parse errors in the minified file which is present when that is enabled. 

That setting takes all the CSS codes from:

Theme Options => Custom CSS
Modules Design Tab Options
Modules Custom CSS ode
Page Builder Custom CSS Field

and places them into that file, if there is an error in one of the custom CSS codes, everything that comes after it, it's invalid and will not be taken into consideration.

You can check that by right clicking on the website, select View page source

Then in that source search for et-divi-customizer-global-cached-inline-styles:

Click on that link, select all the CSS from it and run it through this validator: https://jigsaw.w3.org/css-validator/#validate_by_input

This is just an example but this is how a wrong ; placed into a custom CSS code can trigger a parse error: 

If that happens, identify and correct the error with the help of the validator.

Did this answer your question?