Stop The Crazy Aspect Ratios!
Learn How To Change the Divi Gallery Slider Height
I”ve written several tutorials here on the blog about how to control image gallery images, but recently I had a client who wanted a gallery slider. However, he hated how the different sized images would move the page up and down and it went from landscape to portrait aspect ratios. I wanted to solve this, so I added a few snippets of CSS and it worked out great. I thought some of you would enjoy it, so I created this tutorial for you. Let me know in the comments if you find this sort of thing useful!
NOTE: Live example down below!
1. Add The Gallery Slider and Images
The first thing you need to do, of course, is to have a Gallery Module on your page set to slider layout. Remember, this is the Gallery Module, NOT the Slider Module.
2. Add the CSS Snippet
The first example of text highlights in Divi is my favorite and is fairly popular on modern websites. To create a multi-line colored background highlight like this, just add a CSS class inside the module’s Advanced Tab Custom CSS input area. In this example, we are using the class “pa-multi-line-highlight.”
Note that we are using this with an H2 in this example, so just change the H2 in your snippet to whatever you need such as H1, p, span, etc. Copy and paste one of your choice into the Divi>Theme Options>Custom CSS box.
That’s all there is to it! Here’s a live example of how it will look!
