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!
Categories: Divi CSS Tutorials

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!

35

Last updated Jan 3, 2021 @ 1:00 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

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

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

20 Comments

  1. 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
      • 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;”

    • 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.

  2. 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
      • Jay Ellis

        I’m having the same issue. I tried pasting in all the available CSS boxes and get the same 2 errors in all.

      • Nelson Lee Miller (aka The Divi Teacher)

        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.

      • Jay Ellis

        You nailed it. I was in the module. Added to main and it works like a champ. Thanks for the help!

  3. Marko

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

    Reply
    • Hemant Gaba

      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
  4. Jeni

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

    Reply
  5. 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

      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
  6. Maddie

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

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart