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!
▶️ Please watch the video above to get all the exciting details! 👆
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.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about 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!
Hi guys,
I ended up this CSS which would not have been supported by all browsers when this guide was written.
Both properties have rather good support by now.
.et_pb_gallery {background:rgb(127,127,127);} // this might be optional
.et_pb_gallery .et_pb_gallery_image img {
aspect-ratio: 16 / 9;
object-fit: contain;
}
Thank you for sharing the code.