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!

30
Last updated Jan 3, 2021 @ 1:00 pm

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.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

13 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
  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

Submit a Comment

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

Recent Posts

Welcome Hemant To Our Team

Welcome Hemant To Our Team

I would like to introduce you to our new team member, Hemant Gaba, who has been helping out with everything behind the scenes!

Pin It on Pinterest

0

Your Cart