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