Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Force The Divi Gallery Slider To A Fixed Height

Nelson Miller Profile Orange
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!

▶️ 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!

Categories: Divi CSS Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

29 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. klh102 <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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;
    }

    Reply

Comments By Others

  1. OG Sean

    This doesn’t work anymore, you should update it.

    It just forces the images to fit and distorts their aspect ratio to fit. DIVI probably changed something in their CSS since you first wrote this. But, your example somehow works, and mine are all distorted using your exact code.

    Changing width to max-width un-distorts them, but then the height changing affecting the entire page beneath issue comes right back again.

    How DIVI can put out a module like this I have no idea, it’s complete crap.

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi OG Sean!

      Apologies for the trouble caused to you. Can you please share the page URL with me to check further?

      Reply
  2. Lisa

    Thanks so much for sharing this! I’m using the gallery module in a slideshow layout, and some of my taller images are left-aligned, do you know if there’s a way to keep all the images centered? Thanks in advance!

    Reply
  3. Reggie

    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.

    Reply
  4. Erik Vankat

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply
  5. Maddie

    Hi, thank you for this. If I have multiple galleries on one page, how do I apply different heights to each gallery?

    Reply
  6. DJ

    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!

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      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.

      Reply
  7. Jeni

    I just wanted to say thank you so much for the tips! And making such an easy tutorial to follow.

    Reply
  8. Marko

    The gallery completely disappears in mobile version after taping the arrow. What could be the cause?

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      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?

      Reply
  9. Tivadar Farkas

    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?

    Reply
  10. Scott Barnes

    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?

    Reply
    • Lisa

      just add object-fit: cover

      Reply
      • noname

        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.

      • 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

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

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Shopping cart0
There are no products in the cart!
You may be interested in…
Graphic showcasing Divi Assistant features and toolset.
From: $69.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Divi Carousel Maker Plugin by Pee Aye Creative
From: $29.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Logo for D Beginner Course with graduation cap
From: $47.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Divi Events Calendar Plugin Modules For The Events Calendar by Pee Aye Creative
From: $54.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Continue shopping
0