Code by Day | Explore By Weekend

How To Force the Divi Gallery Slider To A Fixed Height Tutorial by Pee-Aye Creative

How To Force The Divi Gallery Slider To A Fixed Height

The Divi Gallery Slider layout can be very frustrating, but I'm here to solve that and show you how to force the Divi Gallery Slider to a fixed height!

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!

17

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Scott Barnes
Scott Barnes
6 months ago

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?

Elizabeth

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.

Ben
Ben
Reply to  Elizabeth
2 months ago

Hello,
Replace “height: 600px;” by “max-height: 600px;”

Lisa
Lisa
Reply to  Scott Barnes
1 month ago

just add object-fit: cover

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Join over 4,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart