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!
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!
I hope you have enjoyed learning How To Force The Divi Gallery Slider To A Fixed Height. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
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 :)
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.
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?
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
on September 16, 2020 at 10:17 am
Hello,
Replace “height: 600px;” by “max-height: 600px;”
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.
Tivadar Farkas
on December 17, 2020 at 7:39 am
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?
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?
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!
In this tutorial i will show you how to fix the random HTML issue in the Visual tab of the Divi text editor.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
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
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.
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?
Hi Tivadar,
That depends where you pasted it. Where did you paste the code?
I’m having the same issue. I tried pasting in all the available CSS boxes and get the same 2 errors in all.
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.
You nailed it. I was in the module. Added to main and it works like a champ. Thanks for the help!
Great to hear!
The gallery completely disappears in mobile version after taping the arrow. What could be the cause?
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?
I just wanted to say thank you so much for the tips! And making such an easy tutorial to follow.
Thank you Jeni, I really appreciate that!
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!
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.
Hi, thank you for this. If I have multiple galleries on one page, how do I apply different heights to each gallery?
You can always add a custom CSS class to any module any time you want to target a specific module.