Space Below Carousel With Portfolio Modules

Problem

There can sometimes be extra space showing below the carousel when you are using the Divi Portfolio module to display projects. This issue happens because of the way Divi loads their Portfolio module. It’s a technical issue, but to try to explain, they load the images initially as full height, which in the code looks like the module is taller. Then our carousel finds their height and calculates the height for the carousel accordingly, but as you are seeing it is not correct.

Solution

To solve this, we have added a new max height setting to the carousel in the Miscellaneous toggle. This allows you to set the maximum height of the carousel. The value will vary, depending on your specific carousel, based on the height of the modules and content within it. You could try guessing the best value or use trial and error by starting with something like 250px and see how it looks, and adjust as needed, but the best way to choose a value to enter into this field is to use the browser inspect tools and check the actual height of the carousel.

Carousel Stopped Working 

Occasionally we get a customer support ticket about the carousel not working, or it suddenly stopped working for no apparent reason. But every time this happens, it is always related to something blocking our carousel on the customer site. 99% of the time, caching and optimization plugins are the culprit. Just recently someone realized that their Asset Cleanup plugin was removing/blocking our plugin’s code. Others have had a caching plugin strip our CSS class from the column, but the class is used to make the carousel work. In each of these cases, the issue is not related to our plugin, but to an external force incorrectly affecting it.

We had a customer who could not get the carousel to work on actual mobile devices, but it worked fine on desktop and in the browser preview. We figured out the issue was related to the optimizer plugin blocking our code. Below are some examples that we know about so far.

Siteground Optimizer

To solve this issue, go to Siteground Optimizer > Frontend from the WordPress message. Then look for the Exclude from Deferral of Render-blocking JS option and click the edit icon. Then select the /wp-includes/js/jquery/jquery.min.js option and click Confirm.

WP Rocket

A customer using WP Rocket sent us these instructions:

1. Open your WP Rocket settings in your WordPress dashboard.
2. Navigate to the “File Optimization” tab.
3. In the “Excluded CSS Files” section, add the following URL:
*/wp-content/plugins/divi-carousel-maker/styles/style.min.css*
4. In the “Excluded JavaScript Files” section, add the following URLs:

*/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js /jquery-migrate(.min)?.js
/Divi/js/scripts.min.js /Divi/js/custom.unified.js /js/magnific-popup.js*
5. Save your changes by clicking the “Save Changes” button.