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 next step is to simply past the snippet into your website.
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
/*set the height of the slide image*/
.et_pb_gallery_fullwidth .et_pb_gallery_image img {
width: auto;
height: 600px;
}
/*align the slide image to the middle*/
.et_pb_gallery_image {
line-height: 0;
text-align: center;
}
/*style the slider previous and next buttons*/
a.et-pb-arrow-prev {
color: #000!important;
background: #fff;
margin-left: 18px!important;
opacity: 1!important;
}
a.et-pb-arrow-next {
color: #000!important;
background: #fff;
margin-right: 18px!important;
opacity: 1!important;
}
@media all and (min-width: 768px) {
.et-pb-arrow-next {
opacity: 1;
right: 22px;
}
.et-pb-arrow-prev {
opacity: 1;
left: 22px;
}
}
@media all and (max-width: 767px) {
.et-pb-arrow-next {
opacity: 1;
right: 0;
}
.et-pb-arrow-prev {
opacity: 1;
left: 0;
}
}That’s all there is to it! Here’s a live example of how it will look!
This is great for desktop and fixing the vertical pictures, but when you preview the site fr mobile devices all of the landscape images are being distorted. Is there a way to do it so that doesn’t happen?
Hi Scott,
How are they being distorted? You could certainly use a media query to change the CSS for that device size. You can learn more about those here: https://www.peeayecreative.com/how-to-add-custom-css-media-queries-to-divi-for-making-your-site-responsive/
I will respond instead of Scott because I have come across the same issue. The images are distorted- stretched vertically. The width for me is not an issue (the images fit to the width of the screen) they are just very… tall.
Hello,
Replace “height: 600px;” by “max-height: 600px;”
just add object-fit: cover
You are half correct. What is requires is this:
.myslidegallery .et_pb_gallery_image.landscape img {
max-width: 100% !important;
max-height: 450px !important;
object-fit: cover; /* container */
}
myslidegallery is just a custom class I injected in the gallery to better control which ones I want to manipulate. Also, the .landscape class is important in order for the cover function to work correctly.
When I copied the snippet into my template, I received “Expected RBRACE” error in the first line, and “Unexpected token ‘}’.” at the end. What did I do wrong?
Hi Tivadar,
That depends where you pasted it. Where did you paste the code?
I’m having the same issue. I tried pasting in all the available CSS boxes and get the same 2 errors in all.
What available CSS boxes? You need to paste CSS like this into Divi Theme Options Custom CSS or the style.css file of a child theme.
You nailed it. I was in the module. Added to main and it works like a champ. Thanks for the help!
Great to hear!
The gallery completely disappears in mobile version after taping the arrow. What could be the cause?
I am afraid that I am not able to replicate this issue on my end. Could you please share the URL of the page where the slider is placed for us to investigate further?
I just wanted to say thank you so much for the tips! And making such an easy tutorial to follow.
Thank you Jeni, I really appreciate that!
Great tutorial, but how can I add the image caption to the gallery slider? I cannot find this info anywhere and hoping you can save the day. Please let me know. Thanks!
Hi DJ,
We got your query and we will work on it and definitely try to provide you with the solution as soon as possible.
Hi, thank you for this. If I have multiple galleries on one page, how do I apply different heights to each gallery?
You can always add a custom CSS class to any module any time you want to target a specific module.
Hello,
Thanks for the function. I really needed it so much. I just have two questions. First. Is there any possibility to change the color of the navigation dots? And the second one and possibly the trickier one. Is there any possiblity to add the thumbnail photos under the gallery?
Thanks in advance
I’m glad you like the tutorial. I am sure the dots can be easily changed, although this tutorial is not related to that and we would need a link to help. The Divi gallery does not have any feature to use thumbnail images. For that, you could use something like our Divi Carousel Maker plugin.
Has the code for the divi gallery changed? This seems to be broken now. The code just distorts every image to the same aspect ratio. And why is this clunky gallery still the default build after all of these years?? Someone from Elegant Themes needs to make the gallery usable out of the box.